attachEvent 與addEventListener到底有什么區別呢？總結如下：
一、適應的瀏覽器版本不同
attachEvent方法適用於IE addEventListener方法適用於FF
二、針對的事件不同
attachEvent中的事件帶on 而addEventListener中的事件不帶on
三、參數的個數不同
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);
};
}