CustomEvent 是 JavaScript 中创建和触发自定义事件的核心接口，通过 new CustomEvent() 构造事件对象并用 dispatchEvent() 在 EventTarget 实例上触发，监听则使用 addEventListener() 获取 event.detail 数据。
CustomEvent 是 JavaScript 中用于创建和触发自定义事件的核心接口，它让开发者能脱离原生事件（如 click、input）的限制，在任意时机、任意对象上广播自定义消息。
创建 CustomEvent 实例
使用 new CustomEvent() 构造函数创建事件对象，第一个参数是事件类型字符串（即事件名），第二个参数是可选配置对象，其中 detail 用于携带自定义数据：
-
detail可以是任意类型（字符串、数字、对象、数组），是传递给监听器的主要载荷 -
bubbles控制事件是否冒泡（默认 false） -
cancelable控制事件能否被取消（默认 false）
示例：
const myEvent = new CustomEvent('userLogin', {
detail: { userId: 123, username: 'Alice' },
bubbles: true,
cancelable: false
});
用 dispatchEvent 触发自定义事件
dispatchEvent() 是 EventTarget 接口的方法（Element、Document、Window、甚至自定义类都继承它），调用它才能真正“发出”事件：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 必须在支持事件的宿主对象上调用，比如
document.dispatchEvent(myEvent)或button.dispatchEvent(myEvent) - 不能直接对事件对象调用
myEvent.dispatchEvent()—— 这是常见错误 - 触发后，所有监听该类型事件的回调会被同步执行（除非异步处理逻辑）
完整示例：
// 创建事件
const notifyEvent = new CustomEvent('dataUpdated', {
detail: { data: [1, 2, 3], timestamp: Date.now() }
});
// 在 document 上触发
document.dispatchEvent(notifyEvent);
// 在某个 div 上触发（需先获取元素）
const container = document.getElementById('app');
container.dispatchEvent(notifyEvent);
监听自定义事件
监听方式与原生事件完全一致，用 addEventListener()：
- 监听时传入的事件名必须与 CustomEvent 构造时的第一个参数严格匹配（区分大小写）
- 回调函数的
event参数中，event.detail就是创建时传入的数据 - 可以监听在任意 EventTarget 实例上，不局限于 DOM 元素
示例：
document.addEventListener('userLogin', (e) => {
console.log('用户登录了：', e.detail.username); // 输出 'Alice'
});
// 监听在自定义对象上（需继承 EventTarget）
class DataStore extends EventTarget {
update(value) {
this.dispatchEvent(new CustomEvent('change', { detail: value }));
}
}
const store = new DataStore();
store.addEventListener('change', e => console.log('新值：', e.detail));
实用注意事项
实际使用中几个关键点容易出错：
- 确保监听和触发发生在同一 EventTarget 实例或其祖先节点上（冒泡前提下）
- 如果想跨组件通信，推荐统一用
document或专用的EventTarget实例作为事件总线 - 避免滥用：高频触发大量 CustomEvent 可能影响性能，复杂状态建议用状态管理方案替代
- IE 不支持 CustomEvent 构造函数，如需兼容旧版可使用
document.createEvent('CustomEvent')+initCustomEvent()（已废弃但仍有场景需要）
