attachEvent 與addEventListener到底有什么區別呢？總結如下：

一、適應的瀏覽器版本不同

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

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

?

二、針對的事件不同

attachEvent中的事件帶on?? 而addEventListener中的事件不帶on

if(obj.addEventListener){obj.addEventListener(events,fn,false); } else{obj.attachEvent('on'+events,fn); }

?

三、參數的個數不同

attachEvent方法兩個參數：第一個參數為事件名稱，第二個參數為接收事件處理的函數； addEventListener 有三個參數：第一個參數表示事件名稱（不含 on，如 "click"）；第二個參數表示要接收事件處理的函數；第三個參數是一個bool值，一般為false

第三個參數叫做useCapture，是一個boolean值，就是true or false，如果送出true的話就是瀏覽器會使用Capture方式，false的話是Bubbling，只有在特定狀況下才會有影響，通常建議是false，而會有影響的情形是目標元素(target element)有祖先元素(ancestor element)，而且也有同樣的事件對應函數，我想，看圖會比較清楚。

?

?

像這張圖所顯示的，我的范例有兩層div元素，而且都設定有click事件，一般來說，如果我在內層藍色的元素上click不只會觸發藍色元素的click事件，還會同時觸發紅色元素的click事件，而useCapture這個參數就是在控制這時候兩個click事件的先后順序。如果是false，那就會使用bubbling，他是從內而外的流程，所以會先執行藍色元素的click事件再執行紅色元素的click事件，如果是true，那就是capture，和bubbling相反是由外而內，會先執行紅色元素的click事件才執行藍色元素的click事件。附上兩個范例，capture和bubbling，兩個檔案只有差在此一參數不同，可以發現事件的發生順序不一樣了。

那如果不同層的元素使用的useCapture不同呢？就是會先從最外層元素往目標元素尋找設定為capture的事件，到達目標元素執行目標元素的事件后，再尋原路往外尋找設定為bubbling的事件。

?

四、執行事件的優先級不同

<div id="outDiv">
?? <div id="middleDiv">
???? <div id="inDiv">請在此點擊鼠標。</div>
?? </div>
</div>

<div id="info"></div>


var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");

outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);
上述是我們測試的代碼，根據 info 的顯示來確定觸發的順序，有三個 addEventListener，而 useCapture 可選值為 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。

全為 false 時，觸發順序為：inDiv、middleDiv、outDiv；
全為 true 時，觸發順序為：outDiv、middleDiv、inDiv；
outDiv 為 true，其他為 false 時，觸發順序為：outDiv、inDiv、middleDiv；
middleDiv 為 true，其他為 false 時，觸發順序為：middleDiv、inDiv、outDiv；
……
最終得出如下結論：

true 的觸發順序總是在 false 之前；
如果多個均為 true，則外層的觸發先于內層；
如果多個均為 false，則內層的觸發先于外層。
下面提供全部代碼，您可以更改其中的 true、false 值，來進行測試。注意，不適用于 IE

五、對this的引用不同

attachEvent綁定的函數,沒有綁定this引用

function doIt(){ ??

??? alert(this); ??

}??

然后我們在頁面中處理如下：?
首先做一個按鈕：<button id="btn">按鈕</button>，然后為該按鈕綁定事件onclick如下：?

<script language="javascript"?type="text/javascript"> ??

document.getElementById("btn4").attachEvent("onclick",doIt); ??

</script>??

經過這種處理之后，doIt方法中的this不代表button,但是使用?
????? document.getElementById("btn4").onclick = doIt時this指向的就是btn代表的button了,?
???? 還有就是?
????? document.getElementById("btn4").addEventListener('click',doSomething,false)；這樣也可以把this綁定進去

最后寫一個兼容所有瀏覽器的監聽事件方法如下：

//兼容所有瀏覽器的attachEvent方法
if(!window.attachEvent && window.addEventListener)?
{?
Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=?
HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)?
{?
var cb = cancelBubble ? true : false;?
this.addEventListener(en.toLowerCase().substr(2), func, cb);?
};?
}

?

總結

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

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