JavaScript事件机制包含捕获、目标、冒泡三阶段：捕获从window向下至目标父级，目标阶段执行目标元素监听器，冒泡从目标向上传至window；默认addEventListener在冒泡阶段执行，设third参数为true可启用捕获。

JavaScript事件机制是指事件在DOM树中传播的完整过程，它不是简单地在某个元素上触发一次就结束，而是会按特定路径经过多个节点。这个机制由三个阶段组成：捕获阶段、目标阶段和冒泡阶段。

捕获阶段从最外层的window对象开始，逐级向下传递到目标元素（比如你点击的按钮），但不会进入目标元素本身；
目标阶段是事件真正到达触发源的时刻，在这个阶段执行目标元素上绑定的事件处理函数；
冒泡阶段则从目标元素开始，逐级向上传递回window，途中会经过所有父级元素。

默认情况下，addEventListener绑定的事件监听器都在冒泡阶段执行（第三个参数省略或为false）。若想在捕获阶段响应，需显式传入true。

---

如何区分并使用事件冒泡

事件冒泡是日常开发中最常用的部分，尤其适合处理结构重复、动态添加的元素。

立即学习“Java免费学习笔记（深入）”；

• 点击子元素时，它的父级、祖父级等也会收到该事件（只要它们绑定了冒泡阶段的监听器）
• 大多数原生事件（如click、mousedown、keydown）都支持冒泡，但focus、blur、mouseenter/mouseleave等例外

常见用法示例：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

• 为列表容器统一监听点击，通过event.target识别具体被点中的<li>，避免给每个<li>单独绑定事件
• 表单提交前，在<form>上拦截并验证，而不是在每个按钮上重复写逻辑

document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('点击了列表项：', e.target.textContent);
  }
});

---

如何启用和利用事件捕获

事件捕获发生在事件到达目标之前，适合做“预处理”——比如权限检查、日志记录、阻止非法操作等。

• 捕获阶段监听器必须在addEventListener中将第三个参数设为true
• 同一元素上，捕获监听器总比目标阶段早执行，也比同级冒泡监听器早
• 若多个祖先元素都设置了捕获监听，会按从外到内的顺序依次触发

典型场景：

• 在页面根容器上统一拦截某些操作（如右键菜单、拖拽起始）
• 防止用户在未登录状态下触发敏感操作，提前在<body>或<div id="app">上拦截

document.body.addEventListener('click', function(e) {
  console.log('捕获阶段：body已收到点击');
}, true); // 注意这个 true

document.getElementById('button').addEventListener('click', function(e) {
  console.log('目标阶段：按钮被点击');
});

点击按钮时，控制台先输出捕获阶段：body已收到点击，再输出目标阶段：按钮被点击。

---

如何控制事件传播行为

有时你不希望事件继续走完全部流程，可以主动干预：

• event.stopPropagation()：阻止事件继续向当前方向传播（无论是捕获还是冒泡）
• event.stopImmediatePropagation()：不仅阻止传播，还阻止同一阶段其他监听器执行
• event.cancelBubble = true：IE兼容写法，效果等同于stopPropagation()

注意：

• stopPropagation() 不影响当前监听器内后续代码执行
• 它只对当前事件流生效，不影响其他独立事件
• 若需要彻底禁用默认行为（如表单提交、链接跳转），还需配合 event.preventDefault()

button.addEventListener('click', function(e) {
  e.stopPropagation(); // 父级不会收到这次点击
  console.log('按钮处理完成');
});