JS 事件流

事件流是 JavaScript 中的一種機(jī)制，用于管理事件的捕獲和冒泡過(guò)程。事件流主要包括兩個(gè)階段：捕獲階段和冒泡階段。

捕獲階段

捕獲階段從事件目標(biāo)元素開(kāi)始，然后沿事件路徑向上傳播到文檔根元素。在這個(gè)階段，事件處理程序可以阻止事件到達(dá)目標(biāo)元素。

冒泡階段

冒泡階段從事件目標(biāo)元素開(kāi)始，然后沿事件路徑向下傳播到文檔根元素。在這個(gè)階段，事件處理程序可以對(duì)事件進(jìn)行響應(yīng)。

事件流的順序

捕獲階段：捕獲處理程序 → 目標(biāo)處理程序
冒泡階段：目標(biāo)處理程序 → 冒泡處理程序

事件流的應(yīng)用

阻止事件冒泡：通過(guò)在捕獲階段使用 event.stopPropagation() 方法，可以阻止事件傳播到目標(biāo)元素和文檔根元素。
跨元素事件處理：通過(guò)在冒泡階段使用 event.target 屬性，可以處理來(lái)自子元素的事件。
自定義事件處理：通過(guò)使用 addEventListener() 方法，可以為特定元素注冊(cè)自定義事件的事件處理程序。

示例

以下代碼展示了如何在捕獲和冒泡階段處理事件：

document.addEventListener('click', (event) => {
  console.log('Capture phase');
}, true); // true 為捕獲階段

document.body.addEventListener('click', (event) => {
  console.log('Target phase');
}, false); // false 為冒泡階段

document.getElementById('button').addEventListener('click', (event) => {
  console.log('Bubble phase');
});

document.getElementById('button').click();

輸出結(jié)果：

Capture phase
Target phase
Bubble phase