DOM2级事件 addEventListener() 和IE attachEvent()的区别

DOM2级事件定义了两个方法 ：addEventListener()和removeEventListener()。接受三个参数：要处理的事件名，作为事件处理的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序，如果false，表示在冒泡阶段调用事件处理程序。

例如 ：要在click事件添加处理程序，可以使用下列代码：

var btn=document.getElementById("myBtn");

 btn.addEventListener("click",function(){
    alert(this.id);
 },false);

通过addEventListener()增加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加时使用的参数相同。这意味着使用addEventListener()添加的匿名函数无法移除。

var btn=document.getElementById("myBtn");

 btn.addEventListener("click",function(){
    alert(this.id);
 },false);
 btn.removeEventListener("click",function(){             //没有用
 alert(this.id);
 },false);

IE 实现了类似的两个方法：attachEvent()和detachEvent()，与DOM2级事件有很多不同。

1.传入的参数不同

attachEvent()和detachEvent()只有两个入参，一个事件名，一个是事件处理函数。attachEvent()的第一个参数,例如"onclick",而DOM2级中addEventListener()的第一参数为"click"

2.处理的阶段不一样

IE8 及更早版本IE只支持事件冒泡 ，attachEvent()和detachEvent()添加的事件处理程序都会添加到冒泡阶段，而DOM2级可以控制，既可以捕获阶段处理也可以冒泡阶段处理。

3.事件处理程序的作用域不同

DOM2级事件添加的事件处理程序，它的作用域是所属的元素，而IE的事件处理程序会在全局作用域中运行。

DOM2级：

var btn=document.getElementById("myBtn");
  btn.addEventListener("click",function(){
      console.log(this.id);   // myBtn 
      },false);

IE :

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(){
      alert(this===window);   // true 
      });

4.添加多个事件处理程序执行的顺序不同

DOM2级为单个元素添加多个事件处理程序后，其执行顺序按照它们添加的顺序执行，IE则是以相反的顺序执行

例如：

DOM2级

var btn=document.getElementById("myBtn");
  btn.addEventListener("click",function(){
      alert(1);   
      },false);

  btn.addEventListener("click",function(){
        alert(2);   
      },false);

执行顺序 1 ，2

IE :

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(){
        alert(1);   
      });
    btn.attachEvent("onclick",function(){
        alert(2);   
      });

执行顺序 2， 1 ；

5.事件对象不同



兼容DOM的浏览器会将一个event对象传入事件处理程序，无论使用的是DOM0 级还是DOM2级事件。

DOM0级:

var btn=document.getElementById("myBtn");
 btn.onclick=function(event){
        alert(event.type);   //click
   }

DOM2级

var btn=document.getElementById("myBtn");
  btn.addEventListener("click",function(event){
      alert(event.type);     //clcik
      },false);

与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于事件处理的类型。在使用DOM0级事件时，event对象作为全局对象window的一个属性。存在。

IE DOM0级:

var btn=document.getElementById("myBtn");
    btn.onclick=function(){
        var event=window.event;
        alert(event.type);   //click  
   }

IE attachEvent():

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(event){
        alert(event.type);       //click   
      });

DOM2级中的event对象与IE中event对象的属性和方法不同：

（1）DOM2级stopPropagation()与IE cancelBubble

DOM2级的stopPropagation()方法可以取消事件冒泡，IE对应的为cancelBubble属性，当cancelBubble设置为true时就可以取消事件冒泡。



（2）DOM2级preventDefault()与IE returnValue

DOM2级preventDefault()方法可以取消事件的默认行为（前提是cancleable为true），IE与之对应的是returnValue,当returnValue的值为true时，就可以取消事件的默认行为。

（3）DOM2级target 与IE srcElement



DOM2级的target取得事件的目标，IE 与之对应的是srcElement。