JavaScript addEventListener 第三個參數

先看一個完整的演示頁面代碼。

Code

結果1. useCapture: false（預設值也是false）

輸出：

true "ul"true "li"2. useCapture: true

輸出：

true "li"true "ul"語法MDN（Mozilla Developer Network）

useCapture 可選 Boolean， 是指在DOM樹中， 註冊了該listener的元素， 是否會先于它下方的任何事件目標， 接收到該事件。 沿著DOM樹向上冒泡的事件不會觸發被指定為use capture（也就是設為true）的listener。 當一個元素嵌套了另一個元素， 兩個元素都對同一個事件註冊了一個處理函數時， 所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。 事件傳播模式決定了元素以哪個順序接收事件。 進一步的解釋可以查看 事件流 及 JavaScript Event order 文檔。 如果沒有指定， useCapture 默認為 false 。

Othree

useCapture 這個參數就是在控制這時候兩個 click 事件的先後順序。

如果是 false ， 那就會使用 bubbling， 他是從內而外的流程， 如果是 true， 那就是 capture， 和 bubbling 相反是由外而內。 capture 和 bubbling， 兩個檔案只有差在此一參數不同， 可以發現事件的發生順序不一樣了。

總(bai)結(hua)

useCapture參數默認為false， 事件執行順序為 事件冒泡bubbling（由內向外）， 即本示例中順序是li → ul；useCapture值為true， 事件執行順序為事件捕捉capturing（由外向內）， 即本示例中順序是ul → li。

來源/參考