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引用

1. function doIt(){
2. alert(this);
3. }

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

1. <script language="javascript" type="text/javascript">
2. document.getElementById("btn4").attachEvent("onclick",doIt);
3. </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的區別（轉載）