1. 程式人生 > >js的事件代理和事件冒泡

js的事件代理和事件冒泡

在javasript中delegate這個詞經常出現,看字面的意思,代理、委託。那麼它究竟在什麼樣的情況下使用?它的原理又是什麼?在各種框架中,也經常能看到delegate相關的介面。這些介面又有什麼特殊的用法呢?這篇文章就主要介紹一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中delegate的介面。

JavaScript事件代理

首先介紹一下JavaScript的事件代理。事件代理在JS世界中一個非常有用也很有趣的功能。當我們需要對很多元素新增事件的時候,可以通過將事件新增到它們的父節點而將事件委託給父節點來觸發處理函式。這主要得益於瀏覽器的事件冒泡機制,後面會詳細介紹。下面我們具體舉個例子來解釋如何使用這個特性。這個例子主要取自David Walsh的相關文章(How JavaScript Event Delegation Works)。 假設有一個 UL 的父節點,包含了很多個 Li 的子節點: 複製程式碼
<ul id="parent-list">
  <li id
="post-1">Item 1</li> <li id="post-2">Item 2</li> <li id="post-3">Item 3</li> <li id="post-4">Item 4</li> <li id="post-5">Item 5</li> <li id="post-6">Item 6</li> </ul>
複製程式碼

當我們的滑鼠移到Li上的時候,需要獲取此Li的相關資訊並飄出懸浮窗以顯示詳細資訊,或者當某個Li被點選的時候需要觸發相應的處理事件。我們通常的寫法,是為每個Li都新增一些類似onMouseOver或者onClick之類的事件監聽。

複製程式碼
function addListeners4Li(liNode){
    liNode.onclick = function clickHandler(){...};
    liNode.onmouseover = function mouseOverHandler(){...}
}

window.onload = function(){
    var ulNode = document.getElementById("parent-list");
    var liNodes = ulNode.getElementByTagName("Li");
    for(var i=0, l = liNodes.length; i < l; i++){
        addListeners4Li(liNodes[i]);
    }   
}
複製程式碼

如果這個UL中的Li子元素會頻繁地新增或者刪除,我們就需要在每次新增Li的時候都呼叫這個addListeners4Li方法來為每個Li節點新增事件處理函式。這就新增的複雜度和出錯的可能性。

更簡單的方法是使用事件代理機制,當事件被拋到更上層的父節點的時候,我們通過檢查事件的目標物件(target)來判斷並獲取事件源Li。下面的程式碼可以完成我們想要的效果:

複製程式碼
// 獲取父節點,併為它新增一個click事件
document.getElementById("parent-list").addEventListener("click",function(e) {
  // 檢查事件源e.targe是否為Li
  if(e.target && e.target.nodeName.toUpperCase == "LI") {
    // 真正的處理過程在這裡
    console.log("List item ",e.target.id.replace("post-")," was clicked!");
  }
});
複製程式碼

為父節點新增一個click事件,當子節點被點選的時候,click事件會從子節點開始向上冒泡。父節點捕獲到事件之後,通過判斷e.target.nodeName來判斷是否為我們需要處理的節點。並且通過e.target拿到了被點選的Li節點。從而可以獲取到相應的資訊,並作處理。

事件冒泡及捕獲

之前的介紹中已經說到了瀏覽器的事件冒泡機制。這裡再詳細介紹一下瀏覽器處理DOM事件的過程。對於事件的捕獲和處理,不同的瀏覽器廠商有不同的處理機制,這裡我們主要介紹W3C對DOM2.0定義的標準事件。

DOM2.0模型將事件處理流程分為三個階段:一、事件捕獲階段,二、事件目標階段,三、事件起泡階段。如圖:

事件捕獲:當某個元素觸發某個事件(如onclick),頂層物件document就會發出一個事件流,隨著DOM樹的節點向目標元素節點流去,直到到達事件真正發生的目標元素。在這個過程中,事件相應的監聽函式是不會被觸發的。

事件目標:當到達目標元素之後,執行目標元素該事件相應的處理函式。如果沒有繫結監聽函式,那就不執行。

事件起泡:從目標元素開始,往頂層元素傳播。途中如果有節點綁定了相應的事件處理函式,這些函式都會被一次觸發。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)來組織事件的冒泡傳播。

jQuery和Dojo中delegate函式

下面看一下Dojo和jQuery中提供的事件代理介面的使用方法。

首先是jQuery:

$("#link-list").delegate("a", "click", function(){
  // "$(this)" is the node that was clicked
  console.log("you clicked a link!",$(this));
});

jQuery的delegate的方法需要三個引數,一個選擇器,一個時間名稱,和事件處理函式。

而Dojo的與jQuery相似,僅是兩者的程式設計風格上的差別:

複製程式碼
require(["dojo/query","dojox/NodeList/delegate"], function(query,delegate){

    query("#link-list").delegate("a","onclick",function(event) {
    // "this.node" is the node that was clicked
    console.log("you clicked a link!",this);
  });
})
複製程式碼

Dojo的delegate模組在dojox.NodeList中,提供的介面與jQuery一樣,引數也相同。

優點

通過上面的介紹,大家應該能夠體會到使用事件委託對於web應用程式帶來的幾個優點:

1.管理的函式變少了。不需要為每個元素都新增監聽函式。對於同一個父節點下面類似的子元素,可以通過委託給父元素的監聽函式來處理事件。

2.可以方便地動態新增和修改元素,不需要因為元素的改動而修改事件繫結。

3.JavaScript和DOM節點之間的關聯變少了,這樣也就減少了因迴圈引用而帶來的記憶體洩漏發生的概率。

寫到這裡,突然想起了之前對於Dojo DataGrid的困惑:那麼多的rows和cells,如何處理他們事件之間的關係。現在想想,使用委託就很簡單了。所有的事件委託到grid最外層的節點上,當事件發生的時候通過一些方法來獲取和新增事件的額外屬性,如rowIndex, cellIndex,之後在分配到onRowClick,onCellClick之類的處理函式上。