JavaScript事件冒泡与捕获详解

document.getElementById('outer').addEventListener('click', () => { console.log('outer clicked'); });

点击“inner”时，控制台输出：

  
inner clicked
  
outer clicked

这就是典型的冒泡行为——事件从最内层元素向上“冒泡”。

事件捕获：从外向内触发
与冒泡相反，事件捕获是从最外层元素开始，逐级向下传递到目标元素的过程。它发生在事件流的捕获阶段。
要启用捕获模式，可以在addEventListener中将第三个参数设为true。
修改上面的例子：
```javascript
document.getElementById('inner').addEventListener('click', () => {
  console.log('inner clicked');
}, true); // 捕获模式

document.getElementById('outer').addEventListener('click', () => {
  console.log('outer clicked');
}, true);
```
此时点击“inner”，输出变为：

  
outer clicked
  
inner clicked

说明事件先经过外层元素，再进入内层。捕获阶段通常用于提前拦截事件或在到达目标前做些处理。

事件委托：利用冒泡提升效率
事件委托是一种利用事件冒泡机制，在父元素上监听子元素事件的技术。它特别适合动态内容或大量相似元素的场景。
比如有一个无序列表，每个li都有点击需求。传统做法是给每个li绑定事件，但如果列表项很多或频繁增删，这种方式效率低且浪费资源。
使用事件委托：
```html

  
条目1
  
条目2
  
条目3

```
```javascript
document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('点击了:', e.target.textContent);
  }
});
```
只需要一个事件监听器，就能处理所有li的点击。e.target指向实际被点击的元素，通过判断可以精确响应。
这种做法减少了DOM操作和内存占用，也自动支持动态添加的元素。

阻止事件传播与默认行为
有时需要中断冒泡或捕获流程。可以使用以下方法：

  
e.stopPropagation()：阻止事件继续向上冒泡或向下捕获
  
e.stopImmediatePropagation()：除了阻止传播，还阻止当前元素上其他同类型监听器执行
  
e.preventDefault()：阻止元素的默认行为（如链接跳转、表单提交）

例如，防止外层div响应点击：
```javascript
document.getElementById('inner').addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('inner clicked, no bubble');
});
```
这时点击inner，outer的事件不会被触发。

基本上就这些。掌握事件的三个阶段和委托机制，能让事件处理更灵活、高效。实际开发中，冒泡用得最多，委托是优化关键，而捕获则适用于特定控制场景。

好了，本文到此结束，带大家了解了《JavaScript事件冒泡与捕获详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！