Javascript中的事件委托和代理
當(dāng)我們需要對很多元素添加事件的時(shí)候，可以通過將事件添加到它們的父節(jié)點(diǎn)而將事件委托給父節(jié)點(diǎn)來觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機(jī)制
```
<ul>
<li class="tt" data-role="menu"></li>
<li class="tt" data-role="menu"</li>
</ul>
```
使用事件代理機(jī)制，當(dāng)事件被拋到更上層的父節(jié)點(diǎn)document的時(shí)候，我們通過檢查事件的目標(biāo)對象（target）來判斷并獲取事件源Li。
```
var?docBody?=?$(document.body);
docBody.delegate('.tt,*[data-role="mneu"]','click',function?(e)?{//class?為"tt"或都data-role='menu'的所有l(wèi)i,這里可以添加多個(gè)條件
e.stopPropagation();?//stop?propagation
console.log(e.target.id);
});
```
原理是：
為父節(jié)點(diǎn)添加一個(gè)click事件，當(dāng)子節(jié)點(diǎn)被點(diǎn)擊的時(shí)候，click事件會從子節(jié)點(diǎn)開始向上冒泡。父節(jié)點(diǎn)捕獲到事件之后，通過判斷e.target來判斷是否為我們需要處理的節(jié)點(diǎn)。從而可以獲取到相應(yīng)的信息，并作處理。
事件捕獲：當(dāng)某個(gè)元素觸發(fā)某個(gè)事件（如onclick），頂層對象document就會發(fā)出一個(gè)事件流，隨著DOM樹的節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)流去，直到到達(dá)事件真正發(fā)生的目標(biāo)元素。在這個(gè)過程中，事件相應(yīng)的監(jiān)聽函數(shù)是不會被觸發(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ù)都會被一次觸發(fā)。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。
