JavaScript中可用EventTarget实现轻量解耦的异步事件通信，通过在异步回调中dispatchEvent触发自定义事件，并用addEventListener监听detail数据响应。
JavaScript 中可以用 EventTarget 实现轻量、解耦的异步事件通信，它不依赖 Promise 或 async/await 语法，而是通过事件机制触发和响应异步动作（比如数据加载完成、状态变更、第三方 SDK 就绪等）。关键在于：事件本身是同步分发的，但你可以把“何时触发事件”放在异步逻辑里，从而让监听者以事件方式响应异步结果。
用 EventTarget 创建可发射事件的对象
任何对象只要继承 EventTarget（或用其实例作为原型），就能调用 dispatchEvent、addEventListener 和 removeEventListener。最常用的方式是直接 new 一个 EventTarget 实例：
const bus = new EventTarget();
你也可以让自定义类继承它，便于封装业务逻辑：
立即学习“Java免费学习笔记（深入）”；
class DataLoader extends EventTarget {
load(url) {
fetch(url)
.then(res => res.json())
.then(data => {
this.dispatchEvent(new CustomEvent('success', { detail: data }));
}))
.catch(err => {
this.dispatchEvent(new CustomEvent('error', { detail: err }));
});
}
}
发射带数据的自定义异步事件
在异步操作完成（如 setTimeout、fetch、WebSocket.onmessage）的回调中，用 new CustomEvent 构造事件，并通过 detail 字段传参——这是推荐方式，安全且语义清晰：
-
必须用
CustomEvent：普通Event不支持传参；detail可以是任意类型（对象、数组、字符串等） -
事件名建议小写 + 连字符，如
'api-loaded'、'auth-ready'，避免与原生事件冲突 -
可选配置冒泡/取消：多数自定义事件不需要，保持默认即可（
bubbles: false, cancelable: false）
setTimeout(() => {
bus.dispatchEvent(new CustomEvent('data-ready', {
detail: { id: 123, name: 'Alice' }
}));
}, 1000);
监听并响应异步事件
监听方式与 DOM 元素一致，使用 addEventListener，回调函数中从 event.detail 取出异步结果：
bus.addEventListener('data-ready', (e) => {
console.log('收到异步数据：', e.detail); // { id: 123, name: 'Alice' }
});
注意几点：
- 监听必须在发射前注册才有效（除非你用事件总线长期持有实例）
-
支持 once 选项：添加
{ once: true }自动移除监听器，适合只响应一次的场景 -
可移除指定监听器：需保留 handler 引用，不能用匿名函数（除非用
once）
实际应用场景示例
适合需要松耦合、跨模块通知的异步流程：
- 插件系统就绪通知：主应用等待插件初始化完成再启动功能
-
配置加载完成广播：多个组件监听
'config-loaded'后读取配置项 -
WebSocket 消息路由：统一封装连接层，将不同消息类型转为对应事件（
'chat-message'、'system-alert'） - 替代简单状态管理：比全局变量 + 回调更清晰，比 Redux 更轻量
不复杂但容易忽略：EventTarget 是浏览器和 Node.js（v14.5+）都原生支持的标准 API，无需额外依赖，也不涉及宏任务/微任务调度细节——它只是让你把“异步完成”这个信号，用大家熟悉的事件模型表达出来。
