<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之類的處理函式上。

在JavaScript程式設計中使用代理

上面介紹的是對DOM事件處理時，利用瀏覽器冒泡機制為DOM元素新增事件代理。其實在純JS程式設計中，我們也可以使用這樣的程式設計模式，來建立代理物件來操作目標物件。這裡引用司徒正美相關文章中的一個例子：

    var delegate = function(client, clientMethod) {
        return function() {
            return clientMethod.apply(client, arguments);
        }
    }
    var ClassA = function() {
        var _color = "red";
        return {
            getColor: function() {
                console.log("Color: " + _color);
            },
            setColor: function(color) {
                _color = color;
            }
        };
    };

    var a = new ClassA();
    a.getColor();
    a.setColor("green");
    a.getColor();
    console.log("執行代理！");
    var d = delegate(a, a.setColor);
    d("blue");
    console.log("執行完畢！");
    a.getColor();

上面的例子中，通過呼叫delegate()函式建立的代理函式d來操作對a的修改。這種方式儘管是使用了apply（call也可以）來實現了呼叫物件的轉移，但是從程式設計模式上實現了對某些物件的隱藏，可以保護這些物件不被隨便訪問和修改。

在很多框架中都引用了委託這個概念用來指定方法的執行作用域。比較典型的如dojo.hitch(scope,method)和ExtJS的createDelegate(obj,args)。有興趣的同學可以看一下他們的原始碼，主要也是js函式的apply方法來制定執行作用域。