JavaScript事件處理冒泡與捕獲

JavaScript 事件處理中的冒泡（Bubble）和捕獲（Capture）是兩種事件傳播的機制。它們描述了當事件觸發后，如何在 DOM 樹中傳播。這兩種機制的主要區別在于事件處理的時機。

1. 冒泡（Bubble）： 冒泡是指事件從最深的節點（事件發生的目標節點）開始，逐級向上傳播到根節點（一般為 document 對象）。在這個過程中，事件會被每個經過的節點捕獲和處理。冒泡機制允許我們在 DOM 樹中的任何層次上處理事件，因此通常用于處理用戶交互，如點擊、鼠標移動等。

在 JavaScript 中，我們可以通過設置元素的 addEventListener 方法的第三個參數為 true 來使用冒泡機制：

element.addEventListener('click', function(event) {
  // 處理事件
}, true); // 設置為 true 使用冒泡機制

2. 捕獲（Capture）： 捕獲是指事件從根節點開始，逐級向下傳播到事件發生的節點。在這個過程中，事件同樣會被每個經過的節點捕獲和處理。捕獲機制允許我們在事件到達目標節點之前就進行處理，因此通常用于處理一些需要在特定時刻執行的操作，如頁面加載完成、窗口大小改變等。

在 JavaScript 中，我們可以通過設置元素的 addEventListener 方法的第三個參數為 false 來使用捕獲機制：

element.addEventListener('click', function(event) {
  // 處理事件
}, false); // 設置為 false 使用捕獲機制

需要注意的是，冒泡和捕獲并不是所有瀏覽器都支持的特性。在較舊的 Internet Explorer 瀏覽器（IE8 及以下版本）中，只支持捕獲機制。為了兼容這些瀏覽器，我們可以使用 attachEvent 方法來添加事件監聽器，并通過設置 attachEvent 方法的第三個參數來選擇使用冒泡或捕獲機制。

element.attachEvent('onclick', function(event) {
  // 處理事件
}, event.srcElement.readyState === 'complete'); // 設置為 true 使用冒泡機制，false 使用捕獲機制