事件委托：利用冒泡的原理蒿赢，把事件加到父級(jí)上，觸發(fā)執(zhí)行效果渣触。
例子：
<ul id="ull">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
//一般寫法
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick=function () {
console.log("1")
}
}
//缺點(diǎn)：綁定多個(gè)事件羡棵，并且如果后續(xù)有新添加的節(jié)點(diǎn)li，需要重新綁定onclick事件
//事件代理
var ull=document.getElementById("ull");
ull.addEventListener("click",function (e) {
var target=e.target;
if(target.nodeName.toUpperCase()=="LI") {
console.log("1")
stopPropagation(e)//阻止繼續(xù)向上冒泡
}
});
事件冒泡：事件從事件目標(biāo)(target)開(kāi)始嗅钻，往上冒泡直到頁(yè)面的最上一級(jí)標(biāo)簽皂冰。(target-body-html-document)
<div id="div2">
<ul id="ull">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
假設(shè)給div和li都綁定了click事件，那么當(dāng)點(diǎn)擊li時(shí)啊犬，會(huì)先后(從內(nèi)到外)觸發(fā)這兩個(gè)click事件灼擂，如果不想要這樣的結(jié)果，那么就需要阻止冒泡
//阻止事件冒泡
function stopPropagation(e) {
if (e.stopPropagation) {
e.stopPropagation();//Firefox
} else {
e.cancelBubble = true;//IE
}
}
事件捕獲：與事件冒泡的順序相反(IE沒(méi)有事件捕獲)
W3C模型
W3C模型是將兩者進(jìn)行中和觉至，在W3C模型中剔应，任何事件發(fā)生時(shí)，先從頂層開(kāi)始進(jìn)行事件捕獲，直到事件觸發(fā)到達(dá)了事件源元素峻贮。然后席怪，再?gòu)氖录赐线M(jìn)行事件冒泡，直到到達(dá)document纤控。
一般的綁定事件方式挂捻，如：onclick，采用的是冒泡方式船万。
但我們可以選擇事件處理函數(shù)在哪一個(gè)階段被調(diào)用刻撒。
addEventListener有三個(gè)參數(shù)：
element.addEventListener(event, function, useCapture)
//第三個(gè)參數(shù)默認(rèn)值是false，表示在事件冒泡的階段調(diào)用事件處理函數(shù)耿导，如果參數(shù)為true声怔，則表示在事件捕獲階段調(diào)用處理函數(shù)
<div id="div1" style="width: 500px;background-color: yellow">
<div id="div2" style="width: 50%;background-color: aqua;margin: 0 auto">
<ul id="ull" style="width: 50%;background-color: coral;margin: 0 auto">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
//事件捕獲
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var ull=document.getElementById("ull");
div2.addEventListener("click",function () {
console.log('div2')
},true); //捕獲時(shí)執(zhí)行
div1.addEventListener("click",function () {
console.log('div1')
});//
ull.addEventListener("click",function () {
console.log('ull')
});
//點(diǎn)擊ul，依次打印出div2舱呻，ull醋火，div1
參考：
https://segmentfault.com/a/1190000000749838
http://www.jb51.net/article/42492.htm
