溫馨提示×

addEventListener的事件冒泡怎樣處理

小樊
158
2024-10-10 10:17:48
欄目: 編程語言

事件冒泡是當事件觸發后,從事件源(觸發元素)開始,逐級向上傳遞到根節點(通常是document對象)。在處理事件冒泡時,你可以使用event.stopPropagation()方法來阻止事件繼續向上冒泡。

以下是一個簡單的示例,說明如何處理事件冒泡:

HTML:

<div id="parent">
  <button id="child">點擊我</button>
</div>

JavaScript:

// 獲取元素
const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 為父元素添加事件監聽器
parent.addEventListener('click', (event) => {
  console.log('父元素被點擊');
});

// 為子元素添加事件監聽器
child.addEventListener('click', (event) => {
  console.log('子元素被點擊');
  // 阻止事件冒泡
  event.stopPropagation();
});

在這個示例中,當你點擊子元素(按鈕)時,只會觸發子元素的事件監聽器,輸出"子元素被點擊"。由于我們在子元素的事件監聽器中調用了event.stopPropagation(),事件不會繼續向上冒泡,因此父元素的事件監聽器不會被觸發,輸出"父元素被點擊"不會出現。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女