JavaScript 事件委託或者事件代理介紹

本章節介紹一下標題標題中的事件委託這個概念和它的相關用法，代理也是一種叫法之一。

其實從名稱就可以看出事件委託其實就是自己的事情交給別人去幹，下面就做一下介紹。

下面是一個li元素列表:

[HTML] 純文字檢視 複製程式碼
<ul id="list">
  <li id="item1">螞蟻部落一</li>
  <li id="item2">螞蟻部落二</li>
  <li id="item3">螞蟻部落三</li>
  <li id="item4">螞蟻部落四</li>
</ul>

如果我們要實現點選li元素獲取當前li元素中的內容，我們可以為每一個li元素註冊onclick事件處理函式。

看如下程式碼。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
window.onload=function(){
  var ulNode=document.getElementById("list");
  var liNodes=ulNode.childNodes||ulNode.children;
  for(var index=0;index<liNodes.length;index++){
    liNodes[index].addEventListener('click',function(e){
      alert(e.target.innerHTML);
    },false);
  }
}

上面的程式碼實現了我們的功能，但是缺點也是有的，假如不停的動態刪除或新增li，則就沒有那麼靈活了，比如新新增的元素就沒有註冊事件處理函式，這個時候委託就可以派上用場了，下面就介紹一下它的實現原理。

事件階段:

當一個DOM事件被觸發的時候，它並不是只在它的起源物件上觸發一次，而是會經歷三個不同的階段。

簡而言之：事件一開始從文件的根節點流向目標物件(捕獲階段)，然後在目標對向上被觸發(目標階段)，之後再回溯到文件的根節點(冒泡階段)如圖所示:

事件捕獲階段(Capture Phase):

事件的第一個階段是捕獲階段。事件從文件的根節點出發，隨著DOM樹的結構向事件的目標節點流去。

途中經過各個層次的DOM節點，並在各節點上觸發捕獲事件，直到到達時間的目標節點。捕獲階段的主要任務是簡歷傳播路徑，在冒泡階段，時間會通過這個路徑回溯到文件根節點。

[JavaScript] 純文字檢視 複製程式碼
element.removeEventListener(<event-name>, <callback>, <use-capture>);

通過上面的這個函式來給節點設定監聽，可以通過將;設定成true來為事件的捕獲階段新增監聽回撥函式。在實際應用中，我們並沒有太多使用捕獲階段監聽的用例，但是通過在捕獲階段對事件的處理，我們可以阻止類似click事件在某個特定元素上被觸發。

[JavaScript] 純文字檢視 複製程式碼
var form=document.querySeletor('form');
form.addEventListener('click',function(e){
  e.stopPropagation();
  },true);

如果對這種用法不是很瞭解的話，最好還是將設定為false或者undefined，從而在冒泡階段對事件進行監聽

目標階段(Target Phase):

當事件到達目標節點時，事件就進入了目標階段。事件在目標節點上被觸發，然後逆向迴流，知道傳播到最外層的文件節點。

對於多層巢狀的節點，滑鼠和指標事件經常會被定位到最裡層的元素上。假設，你在一個div元素上設定了click的監聽函式，而使用者點選在了這個div元素內部的p元素上，那麼p元素就是這個時間的目標元素。事件冒泡讓我們可以在這個div或者更上層的元素上監聽click事件，並且時間傳播過程中觸發回撥函式。

冒泡階段(Bubble Phase):

事件在目標事件上觸發後，並不在這個元素上終止。它會隨著DOM樹一層層向上冒泡，直到到達最外層的根節點。也就是說，同一事件會一次在目標節點的父節點，父節點的父節點...直到最外層的節點上觸發。

絕大多數事件是會冒泡的，但並非所有的。具體可見：規範說明

由上可以想到，可以使用事件代理來實現對每一個li的監聽。程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
window.onload=function(){
  var ulNode=document.getElementById("list");
  ulNode.addEventListener('click',function(e){
    if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*判斷目標事件是否為li*/
      alert(e.target.innerHTML);
    }
  },false);
};