定義：
- 事件：用戶或瀏覽器自身執行的某種動作。（click,load,mouseover）
- 事件流：從頁面中接收事件的順序，也可理解為事件在頁面中傳播的順序。
- 事件處理程序：響應某個事件的函數。均以on開頭。（onclick,onmouseover等）
1.事件流
事件流分成兩種：事件冒泡和事件捕獲：
- IE的事件流叫做事件冒泡，即事件開始時由最具體的元素接受，然后逐級向上傳播到較為不具體的節點。
- 事件捕獲的思想恰恰相反：不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。(在事件達到預定目標之前捕獲它)
DOM事件流
“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段，處于目標階段和事件冒泡階段。首先發生的是事件捕獲階段，為截獲事件提供了機會。然后是實際的目標接收事件。最后一個階段是冒泡階段，可以在這個階段對事件作出相應。
以上圖為例，單擊div會按照圖上顯示的順序觸發事件。
瀏覽器支持
- IE9，safari，chrome等目前均支持事件捕獲的事件流類型，這些瀏覽器都是從windows對象開始捕獲事件的。
- 大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容瀏覽器。（IE8及更早版本不支持時間捕獲）如果不是特別需要，不建議在事件捕獲階段注冊事件處理程序。
- IE9，Opera,Firefox,Chrome 和 Safari都支持DOM事件流，IE8及更早版本不支持DOM事件流。
例子
addEventListener
在寫例子之前，先簡單介紹一個方法：addEventListener
- 該方法是‘DOM2級事件處理程序’的方法，它接受三個參數：要處理的事件名，作為事件處理程序的函數和一個布爾值
- 布爾值為false代表在冒泡階段調用事件處理程序，true代表在捕獲階段調用事件處理程序
- 比如：btn.addEventListener("click",function(){alert("Hello world")},false) 就代表給按鈕btn注冊一個事件，當被點擊時瀏覽器會彈出消息“Hello World”，并且在冒泡階段調用click。
比較事件冒泡和事件捕獲
接下來就用addEventListener來展示事件冒泡和事件捕獲的區別：
先放上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;
}
呈現的效果很簡單，就是三個不同顏色的div塊：
然后用JS給每一個div注冊一個點擊事件，為了更加直觀，當每一個div的點擊事件被觸發時，會顯示一條該div塊背景顏色的消息，這樣我們就能清楚地看到各個div的click事件被觸發的先后順序
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);
根據上面的例子，addEventListener的布爾值參數被設置為false，所以會在冒泡階段調用事件處理程序。當點擊黃色方塊后，會先后彈出消息"yellow","orange","red"；點擊橙色方塊后，會彈出消息"orange","red"；點擊紅色方塊后，會彈出"red".這個結果也印證了我們之前所說的事件冒泡會使事件開始時由最具體的元素接受，然后逐級向上傳播到較為不具體的節點。這里的黃色方塊是嵌套在最里面的div塊，所以是該例子中最具體的節點，紅色塊是最外層的div快，在該例中是最不具體的節點。
接著我們再測試一下用事件捕獲的思想會獲得什么結果：
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);
結果還是和我們預想的一樣，當點擊黃色方塊后，會先后彈出消息"red","orange","yellow";當點擊橙色方塊后，會先后彈出消息"red","orange"；點擊紅色方塊時仍然只有"red".結果和上例恰好相反。
從上述兩個例子，我們可以清晰地看出事件冒泡和事件捕獲兩種事件流的區別。
事件處理程序
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)
定義
事件代理允許我們需要為很多元素添加事件的時候，可以將事件添加到它們的父節點而將事件委托給父節點來觸發處理函數，這得益于事件冒泡機制。
舉例
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");
}
});
這里我們假設需要為每一個Li節點添加一個點擊事件，如果依次添加，尤其是如果你需要在程序內不同的地方添加和刪除點擊事件，那么就會非常麻煩。其中一個解決方法便是將點擊事件添加到LI節點的父元素UL節點上，如上述代碼所示，當事件冒泡到父節點以后，通過target屬性可以得知哪一個LI節點被點擊了，從而進行相應的處理。此例只是將獲取的LI元素的ID顯示出來了。
jQuery中的delegate()
delegate()方法為指定的元素(被選元素的子元素)添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數，該方法有四個參數，分別是選擇器，事件類型，傳遞到函數的數據，函數，傳遞到函數的數據可以選填。
舉例
還是上面那個例子，html代碼不變，jQuery代碼如下：
$("#parent").delegate("li","click",function(){
$(this).after("clicked");
})
為什么要用事件代理？
事件代理只需要在父元素綁定一次所需事件，而不需要在子元素上綁定多次，從而大大提升了性能，也提升了編碼效率。
參考
- Javascript高級程序設計
- How Javascript Event Delegation Works
