JS总结——DOM事件

事件流

描述的是从页面中接受事件的顺序，分为
冒泡流、捕获流

冒泡：即从事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

捕获：与冒泡相反。

事件处理程序

DOM0级事件处理程序

使用DOM0级事件处理程序，无法添加多个事件。

使用

一共有2种方式：

• 匿名函数

• 函数名称赋名给事件

实例：

//通过匿名函数的形式

var btn1=document.getElementById('btn1');

btn1.onclick=function(){
    alert('btn1 clicked');
}


//函数名称直接赋名给事件  的形式

function test1(){
    alert('btn2 clicked');
}
var btn2=document.getElementById('btn2');
btn2.onclick=test1;

删除：

语法：

元素.事件类型 = null

实例：

//删除事件

var btn3=document.getElementById('btn3');
var count=0;
btn3.onclick=function(){
    alert(count++);

    if(count===3){
        btn3.onclick=null;
    }
}

DOM2级事件处理程序

使用DOM2级事件处理程序，可以添加多个事件。

按顺序写即可，执行的是时候从上往下执行。

语法：

 addEventListener(事件类型,函数,冒泡与否)      创建

 removeEventListener(事件类型,函数,冒泡与否)   移除

参数说明：

事件类型不带“on”前缀！！！

冒泡或捕获：true表示捕获，false表示冒泡

实例：

//创建
var btn1=document.getElementById('btn1');
        btn1.addEventListener('click',function(){
            alert('a');
    },false);


//移除
var handler=function(){
    alert('b');
}

btn1.addEventListener('click',handler,false);
btn1.removeEventListener('click',handler,false);

特别注意：

删除的时候，里面的3个参数要一摸一样！！！

通过addEventListener()添加的事件，只能通过removeEventListener()移除。

这也意味着，如果我们使用匿名函数采用addEventListener()添加的事件，无法被删除！！！

IE事件处理程序（针对IE9之前）

也可以添加多个事件处理程序，但是要注意，执行顺序是从下往上执行。

语法：

  attachEvent(事件类型,函数) 创建

  detachEvent(事件类型、函数,) 删除

参数说明：

事件类型要加前缀“on”！！！

实例：

var btn1=document.getElementById('btn1');

//通过匿名函数添加

btn1.attachEvent('onclick',function() {
    alert('hello maizi');
});


//通过调用函数添加

var handler=function(){
    alert('hello king');
}

btn1.attachEvent('onclick',handler);

封装一个跨浏览器事件处理程序

var EventUtil={

//检测浏览器并且绑定事件
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent('on'+type,handler);
        }else{
            element['on'+type]=handler;
        }
    },

    //通过removeHandler
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent('on'+type,handler);
        }else{
            element['on'+type]=null;
        }
    },

    //得到对象
    getEvent:function(event){
        return event?event:windows.event;
    },

    //得到目标
    getTarget:function(event){
        return event.target||event.srcElement;
    },

    //取消默认行为
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },

    //取消冒泡
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    }
};

事件对象

DOM中的事件对象

事件对象—event

1. type属性——获取事件类型

注意，这是不带“on”前缀的

实例：

var btn1=document.getElementById('btn1');
     btn1.onclick=function(event){
          alert(event.type);            //click
     }

2. target属性——获取事件目标

要注意，这个target属性指的是，事件绑定的实际事件对象。

假设我们用到了事件委托，我们把事件绑定在父元素上，target指的还是那个实际事件对象。

3. stopPropagation( )——阻止事件冒泡

这个方法要注册在有事件操作的元素上！

实例：

var btn1=document.getElementById('btn1');

btn1.addEventListener('click',function(e){
    alert('botton clicked');
    e.stopPropagation();
};

body.addEventListener('click',function(e){
    alert('body clicked');    
};

4. preventDefault( )——阻止事件默认行为

注意，只有cancelabel属性设置为true，才能用。

实例：

<a id = "myLink" href = "http://www.baidu.com"></a>

var link = documentGetElementById("myLink");

link.onclick = function(e){
    e.preventDefault(); 
};

IE中的事件对象

（1)type属性            获取事件类型

（2）srcElement属性     获取事件目标

（3）cancelBubble属性   阻止事件冒泡

    设置为true表示阻止冒泡

（4）returnValue属性    阻止事件默认行为

    设置为false表示阻止事件的默认行为