事件流是 javascript 處理事件的機(jī)制，包括捕獲和冒泡階段。捕獲階段從事件源向上傳播，而冒泡階段從事件源向下傳播。事件流使開(kāi)發(fā)者能夠阻止事件冒泡和跨元素處理事件。
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();
登錄后復(fù)制
輸出結(jié)果：
Capture phase Target phase Bubble phase
登錄后復(fù)制
