在捕獲階段執行元素事件處理程序的不同方式

Question

我可以讓元素在捕獲階段執行它們的處理程序，如下所示：

elem.addEventListener('event', handler, {once: false, capture: true});

將第三個參數設置為true也有效 - 有什么明顯的原因嗎？ 這樣做有什么副作用嗎？

Answer 1

在引入options對象之前，布爾參數是它的原始工作方式。 這就是它（仍然）有效的原因：為了向后兼容。

請參閱文檔：

句法

target.addEventListener(type, listener [, options]); target.addEventListener(type, listener [, useCapture]);

您可以通過一個布爾useCapture （這個存在已較長時間）或選擇對象，它允許您指定capture太多，但其他的東西，以及（如once ）。

因此， addEventListener(..., true)與addEventListener(..., { capture: true }) ，並且沒有副作用。

options對象形式自 2016 年以來就存在。 檢查caniuse以查看哪些客戶端支持它。

Answer 2

如果您沒有其他可能對事件或頁面執行操作的事件偵聽器，那么通常將偵聽器附加到何處無關緊要。 如果這是唯一的偵聽器，您可以將其附加到元素或其父級之一，或文檔或window ，以及冒泡階段或捕獲階段的任何一個 - 它不會在在大多數情況下。

捕獲偵聽器的主要用途是設置事件處理程序執行的順序。 當事件被分派到元素時，它首先從window向下捕獲，在window觸發捕獲偵聽window ，然后在document ，然后在中間元素上，直到它到達導致事件的最深元素。 在最深的元素中，捕獲和冒泡偵聽器都將按照它們被附加的順序運行。 然后，事件將開始“冒泡”，在最深的元素上觸發冒泡偵聽器，然后是中間元素，然后是文檔，然后是窗口。

為了說明這一點，當偵聽器附加到父級時，請在此處查看捕獲偵聽器如何首先運行：

 document.addEventListener('click', () => console.log('bubbling')); document.addEventListener('click', () => console.log('capturing (method 1)'), true); document.addEventListener('click', () => console.log('capturing (method 2)'), { capture: true });

 <button>click</button>

如果偵聽器附加到的元素與調度事件的元素相同（例如，如果您有一個沒有子項的button ，該button被單擊），則捕獲與冒泡無效 - 所有偵聽器都將按順序運行無論useCapture是什么，它們都是附加的。

冒泡偵聽器可用於防止事件向上冒泡並觸發父偵聽器。 同樣，捕獲偵聽器可以防止事件向下捕獲並觸發子偵聽器。

 window.addEventListener('click', (e) => { e.stopPropagation(); console.log('capturing, stopPropagation') }, true); document.querySelector('button').addEventListener('click', () => console.log('at target'));

 <button>click</button>

上面，捕獲偵聽stopPropagation在事件上調用了stopPropagation ，防止它向下傳播到子偵聽器，如果不是因為stopPropagation它將稍后運行。

對於addEventListener的第三個參數，您可以使用{ capture: useCapture }或僅useCapture作為參數，根據規范：

addEventListener(type, callback, options) 方法在調用時必須運行以下步驟：

1. 讓捕獲、被動和曾經成為扁平化更多選項的結果。

“扁平化更多”在哪里：

1. 讓捕獲成為展平選項的結果。

“扁平化”在哪里：

1. 如果 options 是布爾值，則返回選項。
2. 返回選項的捕獲。