事件觸發(fā)三階段
window 往事件觸發(fā)處傳播，遇到注冊(cè)的捕獲事件會(huì)觸發(fā)
傳播到事件觸發(fā)處時(shí)觸發(fā)注冊(cè)的事件
從事件觸發(fā)處往 window 傳播在扰，遇到注冊(cè)的冒泡事件會(huì)觸發(fā)
事件觸發(fā)一般來說會(huì)按照上面的順序進(jìn)行罐旗，但是也有特例柿顶，如果給一個(gè)目標(biāo)節(jié)點(diǎn)同時(shí)注冊(cè)冒泡和捕獲事件，事件觸發(fā)會(huì)按照注冊(cè)的順序執(zhí)行渺贤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="node"></div>
<script>
var node = document.getElementById('node');
//@event表示事件類型
//@function觸發(fā)的回調(diào)函數(shù)
//@useCapture默認(rèn)為false,表示事件句柄在冒泡階段執(zhí)行雏胃，若為true則在捕獲階段執(zhí)行
// element.addEventListener(event, fn, useCapture)
//其中第三個(gè)參數(shù)除了是布爾值，還可以是一個(gè)對(duì)象志鞍，對(duì)對(duì)象參數(shù)來說瞭亮，可以使用以下幾個(gè)屬性：
/*
- capture，布爾值固棚，和 useCapture 作用一樣
- once统翩，布爾值仙蚜，值為 true 表示該回調(diào)只會(huì)調(diào)用一次，調(diào)用后會(huì)移除監(jiān)聽
- passive厂汗，布爾值委粉，表示永遠(yuǎn)不會(huì)調(diào)用 preventDefault
*/
// 以下會(huì)先打印冒泡然后是捕獲
node.addEventListener('click', event => {
console.log('冒泡')
}, false)
node.addEventListener('click', event => {
console.log('捕獲')
}, true)
</script>
</body>
</html>
一般來說，我們只希望事件只觸發(fā)在目標(biāo)上娶桦，這時(shí)候可以使用 stopPropagation 來阻止事件的進(jìn)一步傳播贾节。通常我們認(rèn)為 stopPropagation 是用來阻止事件冒泡的。
stopImmediatePropagation 同樣也能實(shí)現(xiàn)阻止事件衷畦，但是還能阻止該事件目標(biāo)執(zhí)行別的注冊(cè)事件栗涂。
node.addEventListener(
'click',
event => {
event.stopImmediatePropagation()
console.log('冒泡')
}, false)
// 點(diǎn)擊 node 只會(huì)執(zhí)行上面的函數(shù)，該函數(shù)不會(huì)執(zhí)行
node.addEventListener(
'click',
event => {
console.log('捕獲 ')
}, true)
參考博客：https://blog.csdn.net/MeiLuan_yahoho/article/details/87922819
