在javasript中delegate這個詞經(jīng)常出現(xiàn)，看字面的意思，代理、委托。那么它究竟在什么樣的情況下使用?它的原理又是什么?在各種框架中，也經(jīng)常能看到delegate相關(guān)的接口。這些接口又有什么特殊的用法呢?這篇文章就主要介紹一下javascript delegate的用法和原理，以及Dojo，jQuery等框架中delegate的接口。

JavaScript事件代理

首先介紹一下JavaScript的事件代理。事件代理在JS世界中一個非常有用也很有趣的功能。當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節(jié)點而將事件委托給父節(jié)點來觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機制，后面會詳細介紹。下面我們具體舉個例子來解釋如何使用這個特性。這個例子主要取自David Walsh的相關(guān)文章(How JavaScript Event Delegation Works)。

假設(shè)有一個 UL 的父節(jié)點，包含了很多個 Li 的子節(jié)點：

<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的相關(guān)信息并飄出懸浮窗以顯示詳細信息，或者當某個Li被點擊的時候需要觸發(fā)相應(yīng)的處理事件。我們通常的寫法，是為每個Li都添加一些類似onMouseOver或者onClick之類的事件監(jiān)聽。

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的時候都調(diào)用這個addListeners4Li方法來為每個Li節(jié)點添加事件處理函數(shù)。這就添加的復雜度和出錯的可能性。

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

// 獲取父節(jié)點，并為它添加一個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!"); 
  } 
});  

為父節(jié)點添加一個click事件，當子節(jié)點被點擊的時候，click事件會從子節(jié)點開始向上冒泡。父節(jié)點捕獲到事件之后，通過判斷e.target.nodeName來判斷是否為我們需要處理的節(jié)點。并且通過e.target拿到了被點擊的Li節(jié)點。從而可以獲取到相應(yīng)的信息，并作處理。

事件冒泡及捕獲

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

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

 事件捕獲：當某個元素觸發(fā)某個事件(如onclick)，頂層對象document就會發(fā)出一個事件流，隨著DOM樹的節(jié)點向目標元素節(jié)點流去，直到到達事件真正發(fā)生的目標元素。在這個過程中，事件相應(yīng)的監(jiān)聽函數(shù)是不會被觸發(fā)的。

事件目標：當?shù)竭_目標元素之后，執(zhí)行目標元素該事件相應(yīng)的處理函數(shù)。如果沒有綁定監(jiān)聽函數(shù)，那就不執(zhí)行。

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

jQuery和Dojo中delegate函數(shù)

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

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

jQuery的delegate的方法需要三個參數(shù)，一個選擇器，一個時間名稱，和事件處理函數(shù)。

而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一樣，參數(shù)也相同。

優(yōu)點通過上面的介紹，大家應(yīng)該能夠體會到使用事件委托對于web應(yīng)用程序帶來的幾個優(yōu)點：

1.管理的函數(shù)變少了。不需要為每個元素都添加監(jiān)聽函數(shù)。對于同一個父節(jié)點下面類似的子元素，可以通過委托給父元素的監(jiān)聽函數(shù)來處理事件。

2.可以方便地動態(tài)添加和修改元素，不需要因為元素的改動而修改事件綁定。

3.JavaScript和DOM節(jié)點之間的關(guān)聯(lián)變少了，這樣也就減少了因循環(huán)引用而帶來的內(nèi)存泄漏發(fā)生的概率。

寫到這里，突然想起了之前對于Dojo DataGrid的困惑：那么多的rows和cells，如何處理他們事件之間的關(guān)系。現(xiàn)在想想，使用委托就很簡單了。所有的事件委托到grid最外層的節(jié)點上，當事件發(fā)生的時候通過一些方法來獲取和添加事件的額外屬性，如rowIndex, cellIndex，之后在分配到onRowClick,onCellClick之類的處理函數(shù)上。

在JavaScript編程中使用代理

上面介紹的是對DOM事件處理時，利用瀏覽器冒泡機制為DOM元素添加事件代理。其實在純JS編程中，我們也可以使用這樣的編程模式，來創(chuàng)建代理對象來操作目標對象。這里引用司徒正美相關(guān)文章中的一個例子：

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("執(zhí)行代理！"); 
    var d = delegate(a, a.setColor); 
    d("blue"); 
    console.log("執(zhí)行完畢！"); 
    a.getColor();  

上面的例子中，通過調(diào)用delegate()函數(shù)創(chuàng)建的代理函數(shù)d來操作對a的修改。這種方式盡管是使用了apply(call也可以)來實現(xiàn)了調(diào)用對象的轉(zhuǎn)移，但是從編程模式上實現(xiàn)了對某些對象的隱藏，可以保護這些對象不被隨便訪問和修改。

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