HTML模板本身不支持全局事件总线，必须借助JavaScript实例（如EventTarget）在模板使用前初始化，并由各组件显式监听与触发，同时需手动清理监听器以防内存泄漏。
HTML 模板本身不支持全局事件总线（Event Bus）——它没有运行时、没有事件循环、也没有对象实例，addEventListener 和 dispatchEvent 在纯静态 HTML 中无法跨组件通信。所谓“通过 HTML 模板实现”，实际是指：在基于 HTML 模板的前端框架或轻量运行环境中（如 Vue 的单文件组件、Alpine.js、或手写模板 + DOM 操作），如何用最小侵入方式搭建一个可被所有组件访问的事件中心。
为什么不能直接在 <template> 里写事件总线
HTML 模板（比如 <script type="text/html"> 或 <template> 标签）只是字符串或文档片段，不会自动执行 JS 逻辑。你无法在其中定义 new EventEmitter() 或挂载 on()/emit() 方法。事件总线必须由 JavaScript 实例承载，并确保所有组件能引用到同一个实例。
- 常见错误现象：
Uncaught ReferenceError: EventBus is not defined，因为模板中写了EventBus.$on(...)但没提前声明 - 使用场景：多个独立
<div>块用相同模板渲染，需响应彼此状态（如表单提交后刷新列表） - 关键点：总线必须在模板“使用前”初始化，且生命周期长于任意组件
用 const EventBus = new EventTarget() 是最轻量可行方案
EventTarget 是浏览器原生 API，兼容性好（Chrome 59+、Firefox 52+、Edge 79+），无需额外依赖，比手写 on/emit/off 更可靠。它天然支持事件冒泡控制、once、detail 透传，且与 addEventListener 完全兼容。
- 初始化位置：放在全局脚本最顶部，或模块入口处，例如：
const EventBus = new EventTarget();
- 组件内监听：
EventBus.addEventListener('user:login', (e) => console.log(e.detail.token)); - 组件内触发：
EventBus.dispatchEvent(new CustomEvent('user:login', { detail: { token: 'abc123' } })); - 注意：不能用
EventBus.on——EventTarget没有这个方法，必须用addEventListener
在 Alpine.js 或 Vue 模板中接入需绕过模板编译限制
Alpine.js 的 x-on 和 Vue 的 @click 不支持直接调用全局变量方法（如 @click="EventBus.dispatch(...)"），因为它们只解析当前组件作用域内的属性。必须把总线方法“代理”进组件上下文。
立即学习“前端免费学习笔记（深入）”；
- Alpine.js 示例（在
x-data中注入）：x-data="{ bus: EventBus, login() { this.bus.dispatchEvent(new CustomEvent('auth:login')) } }" - Vue 2/3 Options API：在
created()中this.$bus = EventBus，然后模板用@click="$bus.dispatchEvent(...)" - Vue 3 Composition API：用
const bus = EventBus在setup()中定义，再通过defineExpose或 provide/inject 传递（更推荐后者） - 容易踩的坑：在
mounted才绑定addEventListener，但事件可能已在created阶段触发，导致丢失首条消息
避免内存泄漏的关键是手动清理监听器
不同于框架自带的事件系统（如 Vue 的 @click 会在组件卸载时自动解绑），EventTarget 的监听器一旦添加就永远存在，除非显式调用 removeEventListener。组件销毁时若不清理，会持续响应事件并持有闭包引用，造成内存泄漏。
- Alpine.js：用
x-init绑定，x-effect监听销毁信号（需配合cleanup） - Vue：在
beforeUnmount（Vue 3）或beforeDestroy（Vue 2）中调用EventBus.removeEventListener - 纯 DOM 场景：监听
DOMNodeRemoved不可靠，建议组件主动暴露destroy()方法，在移除前调用 - 性能影响：监听器过多（>100 个）会影响
dispatchEvent性能，可考虑按命名空间过滤或改用发布-订阅模式（如 mitt）
真正麻烦的不是怎么写总线，而是谁来负责销毁监听器、谁来保证事件名不冲突、以及如何让非 JS 开发者（比如只写 HTML 模板的人）也能安全地触发和监听。这些都得靠约定和文档，而不是模板语法本身能解决的。
