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()，事件不会继续向上冒泡，因此父元素的事件监听器不会被触发，输出"父元素被点击"不会出现。