定義：
- 事件：用戶或瀏覽器自身執(zhí)行的某種動作匣沼。（click,load,mouseover）
- 事件流：從頁面中接收事件的順序离钝，也可理解為事件在頁面中傳播的順序。
- 事件處理程序：響應(yīng)某個事件的函數(shù)。均以on開頭湘捎。（onclick,onmouseover等）
1.事件流
事件流分成兩種：事件冒泡和事件捕獲：
- IE的事件流叫做事件冒泡尿招，即事件開始時由最具體的元素接受矾柜，然后逐級向上傳播到較為不具體的節(jié)點。
- 事件捕獲的思想恰恰相反：不太具體的節(jié)點應(yīng)該更早接收到事件就谜，而最具體的節(jié)點應(yīng)該最后接收到事件怪蔑。(在事件達(dá)到預(yù)定目標(biāo)之前捕獲它)
DOM事件流
“DOM2級事件”規(guī)定的事件流包括三個階段：事件捕獲階段，處于目標(biāo)階段和事件冒泡階段丧荐。首先發(fā)生的是事件捕獲階段缆瓣，為截獲事件提供了機(jī)會。然后是實際的目標(biāo)接收事件虹统。最后一個階段是冒泡階段弓坞，可以在這個階段對事件作出相應(yīng)。
以上圖為例车荔，單擊div會按照圖上顯示的順序觸發(fā)事件渡冻。
瀏覽器支持
- IE9，safari夸赫，chrome等目前均支持事件捕獲的事件流類型菩帝，這些瀏覽器都是從windows對象開始捕獲事件的。
- 大多數(shù)情況下茬腿，都是將事件處理程序添加到事件流的冒泡階段呼奢，這樣可以最大限度地兼容瀏覽器。（IE8及更早版本不支持時間捕獲）如果不是特別需要切平，不建議在事件捕獲階段注冊事件處理程序握础。
- IE9，Opera,Firefox,Chrome 和 Safari都支持DOM事件流悴品，IE8及更早版本不支持DOM事件流禀综。
例子
addEventListener
在寫例子之前，先簡單介紹一個方法：addEventListener
- 該方法是‘DOM2級事件處理程序’的方法苔严，它接受三個參數(shù)：要處理的事件名定枷，作為事件處理程序的函數(shù)和一個布爾值
- 布爾值為false代表在冒泡階段調(diào)用事件處理程序，true代表在捕獲階段調(diào)用事件處理程序
- 比如：btn.addEventListener("click",function(){alert("Hello world")},false) 就代表給按鈕btn注冊一個事件届氢，當(dāng)被點擊時瀏覽器會彈出消息“Hello World”欠窒，并且在冒泡階段調(diào)用click。
比較事件冒泡和事件捕獲
接下來就用addEventListener來展示事件冒泡和事件捕獲的區(qū)別：
先放上html 和 css 代碼：
<div id="level1">
<div id="level2">
<div id="level3"></div>
</div>
</div>
#level1{
background:red;
height:200px;
width:200px;
}
#level2{
background:orange;
height:100px;
width:100px;
}
#level3{
background:yellow;
height:50px;
width:50px;
}
呈現(xiàn)的效果很簡單退子，就是三個不同顏色的div塊：
然后用JS給每一個div注冊一個點擊事件岖妄，為了更加直觀型将，當(dāng)每一個div的點擊事件被觸發(fā)時，會顯示一條該div塊背景顏色的消息荐虐，這樣我們就能清楚地看到各個div的click事件被觸發(fā)的先后順序
var level1=document.getElementById('level1');
var level2=document.getElementById('level2');
var level3=document.getElementById('level3');
level.addEventListener('click',function(){
alert('yellow');
},false);
leve2.addEventListener('click',function(){
alert('orange');
},false);
leve3.addEventListener('click',function(){
alert('red');
},false);
根據(jù)上面的例子七兜，addEventListener的布爾值參數(shù)被設(shè)置為false，所以會在冒泡階段調(diào)用事件處理程序福扬。當(dāng)點擊黃色方塊后腕铸，會先后彈出消息"yellow","orange","red"；點擊橙色方塊后忧换，會彈出消息"orange","red"恬惯；點擊紅色方塊后，會彈出"red".這個結(jié)果也印證了我們之前所說的事件冒泡會使事件開始時由最具體的元素接受亚茬，然后逐級向上傳播到較為不具體的節(jié)點。這里的黃色方塊是嵌套在最里面的div塊浓恳，所以是該例子中最具體的節(jié)點刹缝，紅色塊是最外層的div快，在該例中是最不具體的節(jié)點颈将。
接著我們再測試一下用事件捕獲的思想會獲得什么結(jié)果：
html和css代碼都不需要變動梢夯，只需要對JS代碼稍作修改:把布爾值從false改成true.
var level1=document.getElementById('level1');
var level2=document.getElementById('level2');
var level3=document.getElementById('level3');
level.addEventListener('click',function(){
alert('yellow');
},true);
leve2.addEventListener('click',function(){
alert('orange');
},true);
leve3.addEventListener('click',function(){
alert('red');
},true);
結(jié)果還是和我們預(yù)想的一樣，當(dāng)點擊黃色方塊后晴圾，會先后彈出消息"red","orange","yellow";當(dāng)點擊橙色方塊后颂砸，會先后彈出消息"red","orange"；點擊紅色方塊時仍然只有"red".結(jié)果和上例恰好相反死姚。
從上述兩個例子人乓，我們可以清晰地看出事件冒泡和事件捕獲兩種事件流的區(qū)別。
事件處理程序
4種為事件指定處理程序的方式：
- HTML 事件處理程序：
<input type="button" value="click" onclick="showMsg()"/>
function showMsg(){
alert("hello world");
}
- DOM0級事件處理程序：
btn.onclick=function(){
alert("hello world");
};
- DOM2級事件處理程序：
btn.addEventListener("click",function(){},false); //事件冒泡
btn.addEventListener("click",function(){},true); //事件捕獲
- IE事件處理程序
- 通過attachEvent（）添加的事件處理程序會被添加到冒泡階段都毒。
- 使用attachEvent（）方法的情況下色罚，事件處理程序會在全局作用域中運行，因此this等于window账劲。
btn.attachEvent("onclick",function(){
alert("hello world");
});
事件代理(event delegation)
定義
事件代理允許我們需要為很多元素添加事件的時候戳护，可以將事件添加到它們的父節(jié)點而將事件委托給父節(jié)點來觸發(fā)處理函數(shù)，這得益于事件冒泡機(jī)制瀑焦。
舉例
html 代碼如下：
<ul id="parent">
<li id="child1">item1</li>
<li id="child2">item2</li>
<li id="child3">item3</li>
<li id="child4">item4</li>
<li id="child5">item5</li>
</ul>
Javascript代碼如下:
var parent=document.getElementById("parent");
parent.addEventListener("click",function(event){
if(event.target&&event.target.nodeName=="LI"){
alert("list item "+event.target.id+" was clicked");
}
});
這里我們假設(shè)需要為每一個Li節(jié)點添加一個點擊事件腌且，如果依次添加，尤其是如果你需要在程序內(nèi)不同的地方添加和刪除點擊事件榛瓮，那么就會非常麻煩铺董。其中一個解決方法便是將點擊事件添加到LI節(jié)點的父元素UL節(jié)點上，如上述代碼所示榆芦，當(dāng)事件冒泡到父節(jié)點以后柄粹，通過target屬性可以得知哪一個LI節(jié)點被點擊了喘鸟，從而進(jìn)行相應(yīng)的處理。此例只是將獲取的LI元素的ID顯示出來了驻右。
jQuery中的delegate()
delegate()方法為指定的元素(被選元素的子元素)添加一個或多個事件處理程序什黑，并規(guī)定當(dāng)這些事件發(fā)生時運行的函數(shù)，該方法有四個參數(shù)堪夭，分別是選擇器愕把，事件類型，傳遞到函數(shù)的數(shù)據(jù)森爽，函數(shù)恨豁，傳遞到函數(shù)的數(shù)據(jù)可以選填。
舉例
還是上面那個例子爬迟，html代碼不變橘蜜，jQuery代碼如下：
$("#parent").delegate("li","click",function(){
$(this).after("clicked");
})
為什么要用事件代理？
事件代理只需要在父元素綁定一次所需事件付呕，而不需要在子元素上綁定多次计福，從而大大提升了性能，也提升了編碼效率徽职。
參考
- Javascript高級程序設(shè)計
- How Javascript Event Delegation Works
