addEventListener與attachEvent

1、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方法兩個參數：第一個參數爲事件名稱，第二個參數爲接收事件處理的函數；

　　能夠添加許多事件，添加的事件不會覆蓋已存在的事件。

 

2、attachEvent和addEventListener異同點

相同點：

　　都是dom對象的方法，能夠實現一種事件綁定多個事件處理函數。

 

不一樣點：

　　1.attachEvent是IE有的方法，它不遵循W3C標準，而其餘的主流瀏覽器如FF等遵循W3C標準的瀏覽器都使用addEventListener，因此實際開發中需分開處理。

　　2.屢次綁定後執行的順序是不同的，attachEvent是後綁定先執行，addEventListener是先綁定先執行。

3、兼容性

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

 

attachEvent——兼容：IE七、IE8；不兼容firefox、chrome、IE九、IE十、IE十一、safari、opera