捕獲：從外向內(nèi)
冒泡：從內(nèi)向外
在一個(gè)事件發(fā)生時(shí)，捕獲過(guò)程跟冒泡過(guò)程總是先后發(fā)生，跟你是否監(jiān)聽(tīng)毫無(wú)關(guān)聯(lián)，先捕獲后冒泡。
addEventListener有三個(gè)參數(shù)：
- 事件名稱(chēng)
- 事件處理函數(shù)
- 是否捕獲（true為捕獲，false為冒泡，默認(rèn)為false）
document.body.addEventListener('click', eventHandler, true)
當(dāng)我們實(shí)際監(jiān)聽(tīng)事件時(shí)，默認(rèn)使用冒泡模式，當(dāng)開(kāi)發(fā)組件時(shí)，需要通過(guò)父元素控制子元素的行為，可以使用捕獲機(jī)制。
阻止冒泡和取消默認(rèn)事件
- 阻止冒泡
方法：event.stopPropagation()
<button id="btn">點(diǎn)擊</button>
javascript:
document.body.addEventListener('click', (event) => {
event.stopPropagation();
console.log('捕獲階段：body');
}, true);
document.getElementById('btn').addEventListener('click', (event) => {
console.log('捕獲階段：button');
}, true);
document.body.addEventListener('click', (event) => {
console.log('冒泡階段：body');
}, false);
document.getElementById('btn').addEventListener('click', (event) => {
console.log('冒泡階段：button');
}, false);
如果沒(méi)有加event.stopPropagation()的話(huà)，執(zhí)行順序應(yīng)該是：
捕獲階段：body
捕獲階段：button
冒泡階段：button
冒泡階段：body
但是在捕獲階段的body層事件處理方法內(nèi)增加了event.stopPropagation()的話(huà)，執(zhí)行順序就變成了：
捕獲階段：body
由此可得，在上面正常執(zhí)行順序的任意一層，增加event.stopPropagation()，那么原本跟在它后面執(zhí)行的事件都會(huì)被阻止
因?yàn)槭录?zhí)行到了捕獲階段body層后，被阻止了，該事件不會(huì)再向內(nèi)或向外執(zhí)行。
- 取消默認(rèn)事件
方法：event.preventDefault()
作用：取消一個(gè)目標(biāo)元素的默認(rèn)行為，例如：a標(biāo)簽的鏈接跳轉(zhuǎn)行為
