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