JavaScript自定义事件详解

本文深入解析了JavaScript中自定义事件的创建与触发机制，以及事件传播的核心原理——捕获、目标和冒泡三个阶段，并详解了如何通过CustomEvent构造函数灵活传递数据、利用addEventListener精准监听、借助stopPropagation等方法精细控制事件流；无论是实现模块间解耦通信，还是优化动态DOM的事件处理（如事件委托）、全局拦截（如权限校验），这些底层机制都为现代前端开发提供了强大而优雅的解决方案。

JavaScript 创建自定义事件，核心是使用 CustomEvent 构造函数配合 dispatchEvent 方法，让开发者能定义专属事件类型并传递数据。

如何创建和触发自定义事件

自定义事件不是靠 HTML 属性或内置行为触发，而是手动构造、派发：

• 用 new CustomEvent(type, options) 创建事件对象，type 是事件名（如 "data-loaded"），options.detail 可传任意数据（对象、字符串、数字等）
• 调用目标元素的 .dispatchEvent(event) 触发事件，该元素就是事件的“源头”
• 通过 .addEventListener("data-loaded", handler) 监听，回调中可通过 e.detail 获取传递的数据

示例：

const event = new CustomEvent("user-login", {
  detail: { id: 123, name: "Alice" }
});
document.dispatchEvent(event); // 在 document 上触发

document.addEventListener("user-login", e => {
  console.log("登录用户：", e.detail.name); // 输出 Alice
});

事件冒泡与捕获：两个相反的传播阶段

当一个元素（比如按钮）被点击，事件不会只停留在它身上。浏览器会按固定顺序把事件“送出去”，这个过程分两阶段：

• 捕获阶段：事件从 window → document → 根节点 → 逐级向下，直到目标元素的父级（不包括目标本身）。监听器需设置 useCapture = true 才能在此阶段响应
• 冒泡阶段：事件从目标元素开始，逐级向上传到 document，再到 window。这是默认行为，addEventListener 第三个参数为 false 或省略时即走此阶段

目标元素本身处于两个阶段之间，称为“目标阶段”，此时捕获和冒泡监听器都会执行（捕获监听器先于冒泡监听器）。

如何控制事件传播路径

常用方法有三个，都作用于事件对象 e：

• e.stopPropagation()：阻止事件继续向上传播（冒泡）或向下传播（捕获），但不影响同一阶段其他监听器
• e.stopImmediatePropagation()：不仅阻止传播，还立即终止当前阶段剩余所有监听器的执行
• e.cancelBubble = true：旧写法，等价于 stopPropagation()，兼容性更好但不推荐新项目使用

注意：stopPropagation() 不影响默认行为（如表单提交、链接跳转），如需阻止默认动作，应调用 e.preventDefault()。

实际开发中的典型用法

捕获常用于全局拦截，比如在 document 捕获所有点击，做权限校验或埋点；冒泡更常用，支持事件委托——把监听器绑定在父容器，通过 e.target 判断真正点击的是哪个子元素，减少监听器数量，提升性能。

例如：给动态生成的按钮统一处理点击，只需在父