基礎(chǔ)知識(shí)
1.操作系統(tǒng)最先知道用戶點(diǎn)擊了鼠標(biāo)救拉，瀏覽器次之
2.child 被點(diǎn)擊了娶聘，意味著 parent 也被點(diǎn)擊了
3.如果我同時(shí)監(jiān)聽(tīng)了 child 和 parent蹦误，那么誰(shuí)先通知我扔仓？這是個(gè)問(wèn)題芜赌。
捕獲階段
parent 先通知其爵，child 后通知
<body>
<div class="parent">
<div class="child"></div>
</div>
<script>
var parent = document.getElementsByClassName("parent")[0];
var child = document.getElementsByClassName("child")[0];
child.addEventListener('click',function(){
console.log("child")
},true)
parent.addEventListener('click',function(){
console.log("parent");
},true)
document.body.addEventListener('click',function(){
console.log("body");
},true)
</script>
</body>
當(dāng)點(diǎn)擊chlid時(shí)冒冬，控制臺(tái)依次顯示如下：
捕獲從window開(kāi)始，到document,再到html,再到body摩渺，再到被點(diǎn)擊元素的祖先元素简烤，再到被點(diǎn)擊元素的父元素，最后到被點(diǎn)擊的元素摇幻。一級(jí)一級(jí)往下找横侦，只要有監(jiān)聽(tīng)事件，就執(zhí)行绰姻。用一幅圖描述枉侧，如下：
Capture Phase就是捕獲階段，只有早期 Navigator 默認(rèn)支持它狂芋，所以我們一般不用「捕獲階段」榨馁。Bubbling Phase是冒泡階段，一般用「冒泡階段」帜矾。
冒泡階段
child 先通知翼虫，parent 后通知
IE 一開(kāi)始就支持冒泡。
<body>
<div class="parent">
<div class="child"></div>
</div>
<script>
var parent = document.getElementsByClassName("parent")[0];
var child = document.getElementsByClassName("child")[0];
child.addEventListener('click',function(){
console.log("child")
})
parent.addEventListener('click',function(){
console.log("parent");
})
document.body.addEventListener('click',function(){
console.log("body");
})
</script>
</body>
當(dāng)點(diǎn)擊chlid時(shí)屡萤，控制臺(tái)顯示如下：
冒泡跟捕獲相反珍剑，從被點(diǎn)擊的元素開(kāi)始，到被點(diǎn)擊元素的父元素死陆，再到被點(diǎn)擊元素的祖先元素招拙，再到body，再到html措译，再到document迫像，最后到window，一級(jí)一級(jí)往上冒瞳遍，有監(jiān)聽(tīng)事件就執(zhí)行。
