JavaScript中自定义事件通过CustomEvent创建并用dispatchEvent派发，需手动触发且无默认行为、默认不冒泡和不可取消；适用于模块解耦、跨组件通信等场景。

JavaScript 中的自定义事件通过 CustomEvent 构造函数创建，并用 dispatchEvent() 方法派发。它和原生事件（如 click、input）在触发机制上一致，但行为逻辑、触发时机和默认行为完全不同。

如何派发自定义事件

自定义事件需要手动创建、配置并显式派发，不能靠用户交互自动触发：

• 使用 new CustomEvent(type, options) 创建事件实例，options.detail 可传任意数据
• 调用目标元素（或 document、window）的 dispatchEvent(event) 方法触发
• 必须先用 addEventListener() 注册监听器，否则派发后无人响应

示例：

const event = new CustomEvent('dataLoaded', {
  detail: { userId: 123, status: 'success' }
});
document.dispatchEvent(event); // 派发到 document

与原生事件的核心区别

自定义事件不是浏览器内置行为的反映，它不改变 DOM 状态，也不携带默认动作：

• 无默认行为：比如原生 submit 事件会提交表单，preventDefault() 可阻止；自定义事件调用 preventDefault() 无效，除非你在监听逻辑里主动判断并处理
• 不冒泡（默认）：CustomEvent 默认 bubbles: false，需显式设置为 true 才能向上冒泡
• 不可取消（默认）：默认 cancelable: false，若需支持 preventDefault()，创建时要写 { cancelable: true }
• 不绑定特定元素类型：原生 click 只对可点击元素有意义，而自定义事件可派发到任意节点，包括普通对象（只要它实现了 EventTarget 接口）

适用场景与注意事项

自定义事件适合模块解耦、跨组件通信或模拟业务语义事件：

• 父子组件间通信时，避免直接调用方法，改用事件收发更松耦合
• 派发到 document 或自定义 EventTarget 实例，可实现全局消息总线效果
• 注意事件名命名规范：建议用小写字母和中划线（如 user-logged-in），避免和原生事件冲突
• 监听器需手动移除（removeEventListener），尤其在单页应用中防止内存泄漏

扩展：EventTarget 的通用性

任何对象只要继承 EventTarget（如 class MyBus extends EventTarget {}），就能使用 addEventListener 和 dispatchEvent。这使得自定义事件不仅限于 DOM 节点，还能用于纯 JS 模块通信，这是原生事件做不到的。