溫馨提示×

JavaScript 事件冒泡與捕獲如何實現(xiàn)

小樊
81
2024-10-24 08:36:31
欄目: 編程語言

在 JavaScript 中，事件冒泡和捕獲是兩種事件傳播的機制。它們決定了事件從哪個元素開始觸發(fā)，以及是否繼續(xù)向下傳播。默認(rèn)情況下，事件處理程序首先在內(nèi)部元素上執(zhí)行（捕獲階段），然后在外部元素上執(zhí)行（冒泡階段）。

以下是如何實現(xiàn)事件冒泡和捕獲的示例：

  1. 使用 addEventListener 方法設(shè)置事件監(jiān)聽器并指定 useCapture 參數(shù)：
// 捕獲階段
element.addEventListener('click', function(event) {
  console.log('捕獲階段');
}, true);

// 冒泡階段
element.addEventListener('click', function(event) {
  console.log('冒泡階段');
}, false);
  1. 使用 attachEvent 方法設(shè)置事件監(jiān)聽器（僅適用于 Internet Explorer 瀏覽器）：
// 捕獲階段
element.attachEvent('onclick', function() {
  console.log('捕獲階段');
});

// 冒泡階段
element.attachEvent('onclick', function() {
  console.log('冒泡階段');
});

在這兩個示例中，當(dāng)用戶點擊元素時，控制臺將首先輸出 “捕獲階段”，然后輸出 “冒泡階段”。這表明事件首先在內(nèi)部元素上執(zhí)行捕獲階段，然后在外部元素上執(zhí)行冒泡階段。

注意：addEventListener 和 attachEvent 方法的參數(shù)有所不同。addEventListener 的第二個參數(shù)是一個布爾值，用于指定事件處理程序是在捕獲階段還是冒泡階段執(zhí)行。而 attachEvent 的第二個參數(shù)是一個字符串，僅當(dāng)設(shè)置為 'true' 時，事件處理程序才會在捕獲階段執(zhí)行。

0 踩