attachEvent 與addEventListener到底有什麼區別呢？

attachEvent 與addEventListener到底有什麼區別呢？總結以下：

1、適應的瀏覽器版本不一樣

attachEvent方法適用於IE    addEventListener方法適用於FF

 

2、針對的事件不一樣

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

 

3、參數的個數不一樣

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的事件。

 

4、執行事件的優先級不一樣

<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

5、對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); 
}; 
}