<body>
<div id="s1">s1
<div id="s2">s2</div>
</div>
</body>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件");
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件");
},false);
s1.addEventListener("click",function(e){
console.log("s1 捕獲事件");
},true);
s2.addEventListener("click",function(e){
console.log("s2 捕獲事件");
},true);
</script>
addEventListener 第三個(gè)參數(shù)：
true: 捕獲階段觸發(fā)事件
false: 冒泡階段觸發(fā)事件
默認(rèn)值是 false, 也就是默認(rèn)是冒泡階段觸發(fā)事件的。當(dāng)然可以手動(dòng)添加捕獲事件萍启，這樣冒泡和捕獲就同時(shí)存在了眷柔。
1005354-20161222125521823-1914047378.png
由上圖看出辅甥，先捕獲后冒泡
首先理解事件的起始和終止發(fā)生時(shí)間：
當(dāng)我們點(diǎn)擊 div, 時(shí)間捕獲從window 一直傳遞到當(dāng)前 div 就終止睦授，不會(huì)往下走；然后進(jìn)入冒泡階段撵孤，向上層傳遞，再一直到 window 終止竭望。
我們知道邪码，對于不同dom 節(jié)點(diǎn)的事件傳播，是先捕獲后冒泡咬清，那么對于 dom 目標(biāo)節(jié)點(diǎn)闭专，如果同時(shí)存在冒泡和捕獲，又是什么情況呢旧烧？還是遵循上述規(guī)則嗎影钉？
不妨對文章開頭的例子進(jìn)行實(shí)驗(yàn)：
發(fā)現(xiàn) s2 的冒泡發(fā)生在 s2 捕獲之前
這里注意：
對于事件的目標(biāo)節(jié)點(diǎn)，如果同時(shí)存在冒泡和捕獲掘剪，那么事件的執(zhí)行順序和代碼中事件綁定的順序相同
上述示例的答案：
點(diǎn)擊 s1:
s1 冒泡事件
s1 捕獲事件
點(diǎn)擊 s2:
s1 捕獲事件
s2 冒泡事件
s2 捕獲事件
s1 冒泡事件
