JavaScript事件處理冒泡與捕獲

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

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

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

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

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

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

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

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

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