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 状态，也不携带默认动作：
立即学习“Java免费学习笔记（深入）”；
-
无默认行为：比如原生
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 模块通信，这是原生事件做不到的。
