JavaScript事件代理和委托（Delegation）
在javasript中delegate這個詞經常出現，看字面的意思，代理、委托。那么它究竟在什么樣的情況下使用？它的原理又是什么？在各種框架中，也經常能看到delegate相關的接口。這些接口又有什么特殊的用法呢？這篇文章就主要介紹一下javascript delegate的用法和原理，以及Dojo，jQuery等框架中delegate的接口。
JavaScript事件代理
首先介紹一下JavaScript的事件代理。事件代理在JS世界中一個非常有用也很有趣的功能。當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節點而將事件委托給父節點來觸發處理函數。這主要得益于瀏覽器的事件冒泡機制，后面會詳細介紹。下面我們具體舉個例子來解釋如何使用這個特性。這個例子主要取自David Walsh的相關文章（How JavaScript Event Delegation Works）。
假設有一個 UL 的父節點，包含了很多個 Li 的子節點：
當我們的鼠標移到Li上的時候，需要獲取此Li的相關信息并飄出懸浮窗以顯示詳細信息，或者當某個Li被點擊的時候需要觸發相應的處理事件。我們通常的寫法，是為每個Li都添加一些類似onMouseOver或者onClick之類的事件監聽。
如果這個UL中的Li子元素會頻繁地添加或者刪除，我們就需要在每次添加Li的時候都調用這個addListeners4Li方法來為每個Li節點添加事件處理函數。這就添加的復雜度和出錯的可能性。
更簡單的方法是使用事件代理機制，當事件被拋到更上層的父節點的時候，我們通過檢查事件的目標對象（target）來判斷并獲取事件源Li。下面的代碼可以完成我們想要的效果：
為父節點添加一個click事件，當子節點被點擊的時候，click事件會從子節點開始向上冒泡。父節點捕獲到事件之后，通過判斷e.target.nodeName來判斷是否為我們需要處理的節點。并且通過e.target拿到了被點擊的Li節點。從而可以獲取到相應的信息，并作處理。
件冒泡及捕獲
之前的介紹中已經說到了瀏覽器的事件冒泡機制。這里再詳細介紹一下瀏覽器處理DOM事件的過程。對于事件的捕獲和處理，不同的瀏覽器廠商有不同的處理機制，這里我們主要介紹W3C對DOM2.0定義的標準事件。
DOM2.0模型將事件處理流程分為三個階段：一、事件捕獲階段，二、事件目標階段，三、事件起泡階段。如圖：
事件捕獲：當某個元素觸發某個事件（如onclick），頂層對象document就會發出一個事件流，隨著DOM樹的節點向目標元素節點流去，直到到達事件真正發生的目標元素。在這個過程中，事件相應的監聽函數是不會被觸發的。
事件目標：當到達目標元素之后，執行目標元素該事件相應的處理函數。如果沒有綁定監聽函數，那就不執行。
事件起泡：從目標元素開始，往頂層元素傳播。途中如果有節點綁定了相應的事件處理函數，這些函數都會被一次觸發。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。
參考鏈接：
https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html
