DOM事件流（event flow ）存在三個階段：
1、事件捕獲階段
2、處于目標(biāo)階段
3、事件冒泡階段
dom標(biāo)準(zhǔn)事件流的觸發(fā)順序為：先捕獲再冒泡。
即當(dāng)觸發(fā)dom事件時，會先進(jìn)行事件捕獲，捕獲到事件源之后，通過事件傳播進(jìn)行事件冒泡。
事件源：被觸發(fā)dom事件的這個元素被叫作事件源。
事件捕獲（event capturing）：
當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā)dom事件時，從根節(jié)點(diǎn) --->事件源（由外到內(nèi)）進(jìn)行事件傳播。
事件冒泡（dubbed bubbling）：
事件源 --->根節(jié)點(diǎn)（由內(nèi)到外）進(jìn)行事件傳播。
addEventListener（event，F(xiàn)n, Boolean）:
addEventListener方法中，一般只會用到兩個參數(shù)，一個是需要綁定的事件，另一個是觸發(fā)事件后要執(zhí)行的函數(shù)，然而，addEventListener還可以傳入第三個參數(shù)：
element.addEventListener(event, function, useCapture);
useCapture是false，默認(rèn)值，表示在事件冒泡階段調(diào)用事件處理函數(shù);
useCapture是true，則表示在事件捕獲階段調(diào)用處理函數(shù)。
栗子：事件冒泡
執(zhí)行結(jié)果：
如果點(diǎn)擊子元素不想觸發(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);
運(yùn)行結(jié)果
事件委托（事件代理）
事件委托是事件冒泡與事件捕獲的運(yùn)用。一般來講，會把一個或者一組元素的事件委托到它的外層元素（父層或者更外層元素）上，真正綁定事件的是外層元素，當(dāng)事件響應(yīng)到需要綁定的元素（即被委托的元素）上時（事件捕獲階段），會通過事件冒泡機(jī)制從而觸發(fā)它的外層元素的綁定事件上，然后在外層元素上去執(zhí)行函數(shù)。
Jquery的on事件，實(shí)現(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);
? }
});
