DOM事件流（event flow ）存在三個階段：
1价说、事件捕獲階段
2辆亏、處于目標階段
3、事件冒泡階段
dom標準事件流的觸發(fā)順序為：先捕獲再冒泡鳖目。
即當觸發(fā)dom事件時扮叨，會先進行事件捕獲，捕獲到事件源之后领迈，通過事件傳播進行事件冒泡彻磁。
事件源：被觸發(fā)dom事件的這個元素被叫作事件源。
事件捕獲（event capturing）：
當鼠標點擊或者觸發(fā)dom事件時狸捅，從根節(jié)點 --->事件源（由外到內(nèi)）進行事件傳播兵迅。
事件冒泡（dubbed bubbling）：
事件源 --->根節(jié)點（由內(nèi)到外）進行事件傳播。
addEventListener（event薪贫，F(xiàn)n, Boolean）:
addEventListener方法中恍箭，一般只會用到兩個參數(shù)，一個是需要綁定的事件瞧省，另一個是觸發(fā)事件后要執(zhí)行的函數(shù)扯夭，然而，addEventListener還可以傳入第三個參數(shù)：
element.addEventListener(event, function, useCapture);
useCapture是false鞍匾，默認值交洗，表示在事件冒泡階段調(diào)用事件處理函數(shù);
useCapture是true，則表示在事件捕獲階段調(diào)用處理函數(shù)橡淑。
栗子：事件冒泡
執(zhí)行結(jié)果：
如果點擊子元素不想觸發(fā)父元素的事件构拳，可使用event.stopPropagation();
方法：
child.addEventListener("click",function(e){
console.log("click-child");
? e.stopPropagation();
}
栗子：事件捕獲
var parent =document.getElementById("parent");
var child =document.getElementById("child");
document.body.addEventListener("click",function(e){
? console.log("click-body");
},false);
parent.addEventListener("click",function(e){
?console.log("click-parent---事件傳播");
},false);
//新增事件捕獲事件代碼
parent.addEventListener("click",function(e){
?console.log("click-parent--事件捕獲");
},true);
child.addEventListener("click",function(e){
? console.log("click-child");
},false);
運行結(jié)果
事件委托（事件代理）
事件委托是事件冒泡與事件捕獲的運用。一般來講，會把一個或者一組元素的事件委托到它的外層元素（父層或者更外層元素）上置森，真正綁定事件的是外層元素斗埂，當事件響應(yīng)到需要綁定的元素（即被委托的元素）上時（事件捕獲階段），會通過事件冒泡機制從而觸發(fā)它的外層元素的綁定事件上凫海，然后在外層元素上去執(zhí)行函數(shù)呛凶。
Jquery的on事件，實現(xiàn)委托行贪，一般用于動態(tài)生成的元素
document.getElementById('list').addEventListener('click', function (e) {
? // 兼容性處理
? var event = e || window.event;
? var target = event.target ||event.srcElement;
? if(target.matches('li.class-1')){
??? console.log('the content is: ',target.innerHTML);
? }
});
