一、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

轉載于:https://www.cnblogs.com/songForU/p/10905041.html

總結

以上是生活随笔為你收集整理的addEventListener与attachEvent的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。