addEventListener与attachEvent

一、attachEvent和addEventListener

（一）addEventListener

  addEventListener() 方法用于向指定元素添加事件句柄。使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
  语法：element.addEventListener(event, function, useCapture)
        event （必须）字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
        function （必须）指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click”         事件属于 MouseEvent(鼠标事件) 对象。
        useCapture （可选）布尔值，指定事件是否在捕获或冒泡阶段执行。【true：事件句柄在捕获阶段执行； false：默认，事件句柄在冒泡阶段执行】

  可以添加许多事件，添加的事件不会覆盖已存在的事件。

示例：给button绑定两个点击事件，点击按钮时，两个事件都是执行，执行顺序为：myFunction 、someOtherFunction ，不会覆盖。（当然也可以绑定不同的事件）

var obj = document.getElementById("myBtn")
obj.addEventListener("click", myFunction);
obj.addEventListener("click", someOtherFunction);

 

示例：使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

// 添加 <div> 事件句柄 
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 事件句柄 
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

（二）attachEvent

　　attachEvent方法两个参数：第一个参数为事件名称，第二个参数为接收事件处理的函数；

　　可以添加许多事件，添加的事件不会覆盖已存在的事件。

 

二、attachEvent和addEventListener异同点

相同点：

　　都是dom对象的方法，可以实现一种事件绑定多个事件处理函数。

 

不同点：

　　1.attachEvent是IE有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。

　　2.多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。

三、兼容性

addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

 

attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera