事件流是 javascript 處理事件的機制，包括捕獲和冒泡階段。捕獲階段從事件源向上傳播，而冒泡階段從事件源向下傳播。事件流使開發(fā)者能夠阻止事件冒泡和跨元素處理事件。
JS 事件流
事件流是 JavaScript 中的一種機制，用于管理事件的捕獲和冒泡過程。事件流主要包括兩個階段：捕獲階段和冒泡階段。
捕獲階段
捕獲階段從事件目標元素開始，然后沿事件路徑向上傳播到文檔根元素。在這個階段，事件處理程序可以阻止事件到達目標元素。
冒泡階段
冒泡階段從事件目標元素開始，然后沿事件路徑向下傳播到文檔根元素。在這個階段，事件處理程序可以對事件進行響應(yīng)。
事件流的順序
捕獲階段：捕獲處理程序 → 目標處理程序
冒泡階段：目標處理程序 → 冒泡處理程序
事件流的應(yīng)用
阻止事件冒泡：通過在捕獲階段使用 event.stopPropagation() 方法，可以阻止事件傳播到目標元素和文檔根元素。
跨元素事件處理：通過在冒泡階段使用 event.target 屬性，可以處理來自子元素的事件。
自定義事件處理：通過使用 addEventListener() 方法，可以為特定元素注冊自定義事件的事件處理程序。
示例
以下代碼展示了如何在捕獲和冒泡階段處理事件：
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
登錄后復制
