溫馨提示×

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

小樊
81
2024-10-27 06:44:59
欄目: 編程語言

在 JavaScript 中，事件處理程序的執(zhí)行順序取決于事件捕獲和事件冒泡。事件捕獲是從根節(jié)點開始，逐級向下傳遞事件，直到到達目標元素。事件冒泡則是從事件目標開始，向上回溯至根節(jié)點。

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

  1. 為元素添加事件監(jiān)聽器并指定 useCapture 參數(shù)：
element.addEventListener('click', function(event) {
  console.log('捕獲階段');
}, true); // useCapture 設置為 true 表示在捕獲階段執(zhí)行

element.addEventListener('click', function(event) {
  console.log('冒泡階段');
}, false); // useCapture 設置為 false 表示在冒泡階段執(zhí)行
  1. 創(chuàng)建一個簡單的 HTML 結(jié)構(gòu)來測試事件冒泡和捕獲：
<div id="parent">
  父元素
  <button id="child">子元素</button>
</div>
  1. 使用以下 JavaScript 代碼測試事件冒泡和捕獲：
const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function(event) {
  console.log('父元素捕獲階段');
});

child.addEventListener('click', function(event) {
  console.log('子元素捕獲階段');
});

parent.addEventListener('click', function(event) {
  console.log('父元素冒泡階段');
});

child.addEventListener('click', function(event) {
  console.log('子元素冒泡階段');
});

當點擊子元素時，事件處理程序?qū)凑找韵马樞驁?zhí)行：

  • 子元素捕獲階段
  • 父元素捕獲階段
  • 子元素冒泡階段
  • 父元素冒泡階段

通過調(diào)整 useCapture 參數(shù)的值，您可以在事件捕獲或事件冒泡階段執(zhí)行自定義的處理程序。

0 踩