addEventListener的事件冒泡怎样处理 - 问答

事件冒泡是当事件触发后，从事件源（触发元素）开始，逐级向上传递到根节点（通常是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 赞

0 踩