attachevent與addEventListener

attachEvent(IE)與addEventListener(FF)

Mozilla中：

addEventListener的使用方式：

target.addEventListener(type, listener, useCapture);

target： 文檔節點、document、window 或 XMLHttpRequest。 
type： 字符串，事件名稱，不含「on」，好比「click」、「mouseover」、「keydown」等。 
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。 
useCapture ：是否使用捕捉，通常用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener); 
target： 文檔節點、document、window 或 XMLHttpRequest。 
type： 字符串，事件名稱，含「on」，好比「onclick」、「onmouseover」、「onkeydown」等。（不是事件，是事件句柄） 
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

（addEVentListener是w3c標準的event API可是ie不支持標準的capture bubble事件模型，因此只支持2參數的attachEvent不知是名字上的差異，addEventListener第三參數，若是是false那就是bubble過程的event handler若是是true那就是capture過程的event handler,而ie只支持bubble因此不必添加第三參數，而且click是事件，而onclick是event handler不是有沒有on的區別）

addEventListener 用於註冊事件處理程序，IE 中爲 attachEvent，咱們爲何講 addEventListener 而不講 attachEvent 呢？一來 attachEvent 比較簡單，二來 addEventListener 纔是 DOM 中的標準內容。

簡介

addEventListener 爲文檔節點、document、window 或 XMLHttpRequest 註冊事件處理程序，在之前咱們通常是 <input type="button" onclick="..."，或 document.getElementById("testButton").onclick = FuncName， 而在 DOM 中，咱們用 addEventListener（IE 中用 attachEvent）。

語法

target.addEventListener(type, listener, useCapture);

 

• target 文檔節點、document、window 或 XMLHttpRequest。
• type 字符串，事件名稱，不含「on」，好比「click」、「mouseover」、「keydown」等。
• listener 實現了 EventListener 接口或者是 JavaScript 中的函數。
• useCapture 是否使用捕捉，看了後面的事件流一節後就明白了，通常用 false。

示例

function Go()

{

    //...

}

document.getElementById("testButton").addEventListener("click", Go, false);

或者 listener 直接就是函數

document.getElementById("testButton").addEventListener("click", function () { ... }, false);

 

 

 

 addEventListener－事件流

說到 addEventListener 不得不說到事件流，先說事件流對後面的解釋比較方便。

當一個事件發生時，分爲三個階段：

捕獲階段 從根節點開始順序而下，檢測每一個節點是否註冊了事件處理程序。若是註冊了事件處理程序，而且 useCapture 爲 true，則調用該事件處理程序。（IE 中無此階段。）

目標階段 觸發在目標對象自己註冊的事件處理程序，也稱正常事件派發階段。

冒泡階段 從目標節點到根節點，檢測每一個節點是否註冊了事件處理程序，若是註冊了事件處理程序，而且 useCapture 爲 false，則調用該事件處理程序。

舉例

<div id="div1">

  <div id="div2">

    <div id="div3">

      <div id="div4">

      </div>

    </div>

  </div>

</div>

若是在 d3 上點擊鼠標，事件流是這樣的：

捕獲階段 在 div1 處檢測是否有 useCapture 爲 true 的事件處理程序，如有，則執行該程序，而後再一樣地處理 div2。

目標階段 在 div3 處，發現 div3 就是鼠標點擊的節點，因此這裏爲目標階段，如有事件處理程序，則執行該程序，這裏不論 useCapture 爲 true 仍是 false。

冒泡階段 在 div2 處檢測是否有 useCapture 爲 false 的事件處理程序，如有，則執行該程序，而後再一樣地處理 div1。

注意，上述捕獲階段和冒泡階段中，實際上 div1 之上還應該有結點，好比有 body，但這裏不討論。

引用：

http://www.cnblogs.com/xgcblog/archive/2011/06/10/2077648.html