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