javaScript 外部对象2

冷不防 2022-07-03 13:57 105阅读 0赞

## document 对象 ##

**创建新节点**  
\-document.createElement（elementName）  
\-elementName,要创建的元素的标签名称  
\-返回的是新创建的节点  
js 代码如下：

var newNode = document.createElement（"input"）；
    
    //设置节点信息
    newNode.type="text";
    newNode.value="marry";
    newNode.style.color="red";

**增加新节点**  
parentNode.appendChild(newNode);  
追加，新节点作为父节点的最后一个子节点添加

parentNode.insertBefore(newNode,refNode);  
refNode:参考节点，新节点位于参考节点之前添加

//c 作为兄弟节点添加
    A.inserBefore(c,d);
    
    //添加一个孩子 b 
    A.appendChild(b);

*  删除节点  
    node.removeChild(childNode)  
    删除某个子节点，childNode 必须是 node 的子节点

## 自定义对象 ##

**1. 自定义对象概述**  
自定义对象是一种特殊的数据类型，由属性和方法封装而成。  
属性指与对象有关的值 对象.属性名  
方法指对象可以执行的行为或可以完成的功能 对象.方法名()

**2. 创建对象**

*  直接创建对象

直接创建 Object 对象

function testObject(){ 
            var personObj = new Object();
            //添加属性
            personObj.name="jack";
            personObj.age="18";
            //添加方法
            personObj.say = new Function("alert('hello')");
            //测试
            personObj.say();   //hello
            alert(personObj.age);  //18
        }

*  使用构造器创建对象  
    定义构造函数，以创建自定义的对象  
    语法：function ObjName (参数1，参数2，···)\{\}

*  使用 JSON 创建对象  
    JavaScript Object Notation,是一种轻量级的数据交换格式。  
    
    
    1.  使用 名/值 对的方式定义
    2.  名需要用“”引起来，如果值是字符串类型也需要用 “”引起来
    3.  多对定义之间用”,”号隔开

var obj = {
       "name":"Dave","age":88};
    //测试对象
    alert(obj.name);

## js 中的事件和 event 对象 ##

**事件**  
1. 什么是事件？  
页面元素状态发生改变，用户在操作键盘或鼠标时触发的动作。事件触发后都会产生 event对象

*  键盘事件
 *  鼠标事件
 *  状态改变事件

２. 事件属性  
通过一个事件属性，可以在某个事件发生时对某个元素进行某种操作。  
3. 事件的定义

//<html>中的代码
    <input type="button" value="按钮" onclick="method();">
    
    //js 中的代码
    btnObj.onclick = method;
    //或者
    btnObj.onclick = function(){ 
        alert("hello");
    }

4.取消事件  
onXXX = “return false;”;

**event 对象**  
**1. event 对象概述**  
任何一个事件触发时都会产生 event 对象，event 的对象记录了事件触发时鼠标的位置、键盘按键状态和触发对象等信息。使用 event 对象可以获得相关信息，比如单击位置、触发对象等。  
**2. 获取 event 对象**  
根据不同的浏览器获取 event 对象有所不同  
**IE 浏览器直接使用 event,代码如下：**

<p onclick="alert(event.clientX);">p text</p>
    <div onclick="func();">div text</div>
    function func(){
        alert(event.clientX +":"+ event.clientY);
    }

**Firefox 浏览器，js 中的代码不能直接写 event（需要作为参数传入） ，代码如下：**

<div onclick="func(event)">div text</div>
    
    function func(event){
        alert(event.clientX+":"+event.clientY);
    }

**3. 如何使用 event 对象**  
事件源：触发事件的元素(事件的目标节点)。  
对于 event 对象经常需要获得事件源，而不同浏览器又有所区别  
IE 浏览器：event.srcElement  
FireFox 浏览器：event.target  
获取事件源代码如下：

<div onclick="func(event)">div text</div>
    
    //IE 
    function func(e){ 
        alert(e.srcElement);
    }
    //FireFox
    function func(e){ 
        alert(e.target);
    }
    
    //考虑兼容问题可以这样写：
    fuction func(e){
        var obj = e.srcElement || e.target
        alert(obj);
    }

**事件处理机制**  
1. 冒泡机制  
当处于 DHTML 对象模型底部的事件触发时，会依次激活上面的对象的同类事件的处理。  
2. 可以取消事件冒泡  
event.stopPropagation();  
event.cancelBubble = true;