事件绑定

• 方式4：IE下使用attachEvent/detachEvent函数进行事件绑定和取消。

attachEvent/detachEvent兼容性不好，IE6~IE11都支持该函数，但是FF和Chrome浏览器都不支持该方法。而且attachEvent/detachEvent不是W3C标准的做法，所以不推荐使用。在IE浏览器下，attachEvent有以下特点。

a) 事件处理函数中this代表的是window对象，不是dom对象。

var dom = document.getElementById("outestA");  
dom.attachEvent('onclick',a);  
function a()

{

alert(this.id);//undefined

}

b) 同一个事件处理函数只能绑定一次。

var dom = document.getElementById("outestA");  
dom.attachEvent('onclick',a);  
dom.attachEvent('onclick',a);    
function a()  
{  
    alert(this.id);
}

虽然使用attachEvent绑定了2次，但是函数a只会调用一次。

c)不同的函数对象，可以重复绑定，不会覆盖。

var dom = document.getElementById("outestA");  
dom.attachEvent('onclick',function(){alert(1);});  
dom.attachEvent('onclick',function(){alert(1);});  
// 当outestA的click事件发生时,会弹出2个对话框

匿名函数和匿名函数是互相不相同的，即使代码完全一样。所以如果我们想用detachEvent取消attachEvent绑定的事件处理函数，那么绑定事件的时候不能使用匿名函数，必须要将事件处事函数单独写成一个函数，否则无法取消。

• 方式5：使用W3C标准的addEventListener和removeEventListener。

这2个函数是W3C标准规定的，FF和Chrome浏览器都支持，IE6/IE7/IE8都不支持这2个函数。不过从IE9开始就支持了这2个标准的API。
JavaScript

// type:事件类型,不含"on",比如"click"、"mouseover"、"keydown";
// 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";
// listener:事件处理函数
// useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型
addEventListener(type,listener,useCapture);

a) 事件处理函数中this代表的是dom对象，不是window，这个特性与attachEvent不同。

var dom = document.getElementById("outestA");  
dom.addEventListener('click',a,false);  
function a()

{

alert(this.id);//outestA

}

b) 同一个事件处理函数可以绑定2次,一次用于事件捕获，一次用于事件冒泡。

var dom = document.getElementById("outestA");  
dom.addEventListener('click',false);  
dom.addEventListener('click',true);  
function a()

{

alert(this.id);//outestA

}

// 当点击outestA的时候,函数a会调用2次
如果绑定的是同一个事件处理函数，并且都是事件冒泡类型或者事件捕获类型，那么只能绑定一次。

var dom = document.getElementById("outestA");  
dom.addEventListener('click',false);  
function a()

{

alert(this.id);//outestA

}

// 当点击outestA的时候,函数a只会调用1次
c) 不同的事件处理函数可以重复绑定，这个特性与attachEvent一致。

事件执行顺序

addEventListener和attachEvent表现一致,如果给同一个事件绑定多个处理函数，先绑定的先执行。

    


//当点击outA的时候，会依次打印出1、2、3、4。

给outA绑定了多个onclick事件处理函数，也是直接点击outA触发的事件，所以不涉及事件冒泡和事件捕获的问题，即addEventListener的第三个参数在这种场景下，没有什么用处。如果是通过事件冒泡或者是事件捕获触发outA的click事件，那么函数的执行顺序会有变化。

事件冒泡和事件捕获

DOM事件流