事件流是 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ù)制