事件冒泡和捕獲：了解DOM 中的傳播

事件冒泡和捕獲在HTML DOM API 中的事件傳播中發揮著至關重要的作用。為了理解它們的功能，讓我們深入研究這兩個概念的複雜性。

事件冒泡與事件捕獲

當一個事件發生在嵌套在另一個元素中的元素中時，並且兩個元素都為該特定事件註冊了事件處理程序，事件傳播模式決定了元素接收事件的順序event.

• 事件冒泡：事件最初由最裡面的元素捕獲和處理，然後向外傳播到其父元素。
• Event捕獲： 事件首先被最外層元素捕獲並向內傳播到其嵌套elements.

滴流與冒泡

捕獲也稱為“滴流”，這個術語有助於記住傳播順序：“滴流、冒泡” 」

瀏覽器支援

• Netscape介紹事件捕獲，而Microsoft 倡導事件冒泡。
• W3C 文檔對像模型事件標準( 2000) 合併了這兩種機制。和其他主要瀏覽器支援這兩種機制.

事件冒泡與事件捕獲相比，在復雜DOM 中的性能可能略低。方法在下列任一中註冊事件處理程序冒泡（預設）或擷取模式。 &&&]考慮以下HTML 結構：

如果li元素發生點擊事件：

• [QuirksMode 上的高階事件](https://www.quirksmode. org/ js/events/)

下面的互動示例說明了事件傳播的捕獲和冒泡階段：

var logElement = document.getElementById('log'); 函數日誌（訊息）{ logElement.innerHTML = ('

'訊息'

'); } 函數捕獲() { log('捕獲：' this.firstChild.nodeValue.trim()); } 函數氣泡（）{ log('氣泡：' this.firstChild.nodeValue.trim()); } var divs = document.getElementsByTagName('div'); for (var i = 0; i 當點選任何反白的元素時，觀察首先發生的事件捕捉階段，然後是冒泡階段。