每個(gè)事件發(fā)生時(shí)，都會(huì)有一個(gè)觸發(fā)并執(zhí)行的過(guò)程，也就是事件的傳播過(guò)程，我們稱為事件流；簡(jiǎn)單來(lái)說(shuō)，事件事件流就是事件從發(fā)生到執(zhí)行結(jié)束的流程。
?
<style> #big{ width: 300px; height: 300px; border:1px solid #000; background:orange; } #middle{ width: 200px; height: 200px; background: #abcdef; } #small{ width: 100px; height: 100px; background: red; }</style><body> <div id="big"> 大 <div id="middle"> 中 <div id="small"> 小 </div> </div> </div></body><script>big.onclick=function(){ console.log(this.innerText); console.log("點(diǎn)擊大盒子");}middle.onclick=function(){ console.log(this.innerText); console.log("點(diǎn)擊中盒子");}small.onclick=function(){ console.log(this.innerText); console.log("點(diǎn)擊小盒子");}</script>效果
?
當(dāng)我們點(diǎn)擊小盒子觸發(fā)點(diǎn)擊事件時(shí)，發(fā)現(xiàn)中盒子跟大盒子的點(diǎn)擊事件也被觸發(fā)了：
?
?
?
當(dāng)我們點(diǎn)擊中盒子觸發(fā)點(diǎn)擊事件時(shí)，發(fā)現(xiàn)大盒子的點(diǎn)擊事件也被觸發(fā)了：
?
?
?
點(diǎn)擊大盒子時(shí)只觸發(fā)了大盒子的點(diǎn)擊事件
?
上面的情況說(shuō)明：點(diǎn)擊小盒子，發(fā)現(xiàn)小盒子事件完畢后，中盒子的事件也被觸發(fā)了，接著大盒子的事件也被觸發(fā)了。這就是說(shuō)目標(biāo)元素的事件在目標(biāo)階段執(zhí)行，其他事件會(huì)在冒泡階段執(zhí)行。
?
總之總結(jié)成一張圖更好理解：
?
?
?
?
那么如何讓事件在捕獲階段執(zhí)行呢？
需要使用另外一種事件綁定方式解決點(diǎn)擊小盒子會(huì)同時(shí)觸發(fā)中大盒子的點(diǎn)擊事件。
使用addEventListener()；解決；
如何使用addEventListener()方法：
obj.addEventListener(type,handle,false);
# 參數(shù)1：給元素綁定的事件類(lèi)型，如：click，mouseover。。。
# 參數(shù)2：處理事件的函數(shù)
# 參數(shù)3：是否在冒泡階段執(zhí)行，true在捕獲階段執(zhí)行，false在冒泡階段執(zhí)行
?
把script中的代碼改成：
document.getElementById("small").addEventListener("click",Click,true);function Click(){ console.log(this.innerText);}效果：
這樣就解決了當(dāng)觸發(fā)小盒子事件時(shí)同時(shí)觸發(fā)大盒子中盒子也會(huì)觸發(fā)點(diǎn)擊事件的問(wèn)題了。
來(lái)源：https://www.icode9.com/content-4-735501.html聯(lián)系客服
