當(dāng)一個HTML元素觸發(fā)一個事件時，該事件會在元素結(jié)點與根結(jié)點之間的路徑傳播。傳播按順序分為三個階段：捕獲階段、目標(biāo)階段、冒泡階段，這個傳播過程就是 DOM 事件流。

事件冒泡就是當(dāng)一個HTML元素出發(fā)一個事件時，它的祖先節(jié)點都會收到該事件。

• 通過設(shè)置addEventListener的第三個參數(shù)可以決定事件是否在捕獲階段觸發(fā)。
• 通過event.stopPropagation()可以阻止事件冒泡。

一、定義

DOM結(jié)構(gòu)是一個樹型結(jié)構(gòu)，當(dāng)一個HTML元素觸發(fā)一個事件時，該事件會在元素結(jié)點與根結(jié)點之間的路徑傳播，路徑所經(jīng)過的結(jié)點都會收到該事件，這個傳播過程可稱為 DOM 事件流（DOM event flow ）。

點擊查看W3C對事件流的定義，里面有事件在dom樹上傳播過程的圖片。

傳播（Propagation）按順序分三個階段（Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again）：

捕獲階段（capture phrase，從根節(jié)點window到目標(biāo)節(jié)點，即最近的、最精確的元素節(jié)點）

目標(biāo)階段（target phrase，目標(biāo)節(jié)點上的事件觸發(fā)按代碼執(zhí)行順序觸發(fā)）

冒泡階段（bubbling phrase，從目標(biāo)節(jié)點到根節(jié)點 ）

二、演示

<div><button>點擊</button> </div>

現(xiàn)在有一個div節(jié)點，div節(jié)點里面有一個button節(jié)點。

let div = document.getElementsByTagName('div')[0]; div.addEventListener('click',(e)=>{console.log('div') }) let button = document.getElementsByTagName('button')[0]; button.addEventListener('click',(e)=>{console.log('button') })

現(xiàn)在我們只看div節(jié)點和button節(jié)點，當(dāng)我們點擊button時會先后打印出button、div，因為addEventListener方法默認(rèn)是讓事件在冒泡階段觸發(fā)。如果我們設(shè)置addEventListener第三個參數(shù)useCapture的值為true，就會讓事件在捕獲階段觸發(fā)：

div.addEventListener('click',(e)=>{console.log('div') }，true)

或者

div.addEventListener('click',(e)=>{console.log('div') }，{capture: true})

這個時候點擊button就會先觸發(fā)div的click事件，再觸發(fā)button的click事件。

三、停止傳播：event.stopPropagation()

stopPropagation方法會讓事件傳播到目標(biāo)階段后停止傳播，所以也叫阻止冒泡。相當(dāng)于讓事件流只剩下捕獲階段和目標(biāo)階段。所以下面的代碼會先后打印出div1、 button 。

button.addEventListener('click',(e)=>{e.stopPropagation()console.log('button') }) div.addEventListener('click',(e)=>{console.log('div1') }，true) div.addEventListener('click',(e)=>{console.log('div2') })

四、馬上停止傳播：event.stopImmediatePropagation();

有個特例，如果目標(biāo)階段的節(jié)點綁定了多個事件，它們不會區(qū)分捕獲和冒泡，事件觸發(fā)的順序為代碼執(zhí)行的順序。

而且event.stopPropagation()在目標(biāo)階段不會生效。如果目標(biāo)階段有 a、b、c 三個觸發(fā)事件會按序執(zhí)行，在 b 事件里設(shè)置event.stopPropagation()并不會影響 c 事件的觸發(fā)。 但是如果在 b 事件里設(shè)置event.stopImmediatePropagation()后 ，事件觸發(fā)到b之后就會停止觸發(fā)后面的所有事件。

---

更多關(guān)于DOM事件模型，推薦看阮一峰的教程

總結(jié)

以上是生活随笔為你收集整理的addeventlistener事件第三个参数 passive_JS DOM 事件流、事件冒泡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。