自定义事件系统基于发布-订阅模式，通过事件中心实现组件间解耦通信。1. 核心是EventHub类，提供on、emit、off方法管理事件；2. 组件通过emit触发事件，on监听事件，实现跨层级、兄弟组件通信；3. 适用于深层级传递、多组件响应同一状态场景；4. 需注意避免滥用、及时off移除监听、统一事件名管理，防止内存泄漏和维护困难。
在前端开发中，组件化是构建可维护、可复用应用的核心方式。而组件之间如何通信，则是组件化设计的关键问题之一。除了常见的父子组件传值（props 和回调函数）外，自定义事件系统提供了一种更灵活、解耦更强的通信机制。
什么是自定义事件系统
自定义事件系统是一种基于“发布-订阅”模式（也称观察者模式）的通信机制。它允许组件不直接依赖彼此，而是通过一个事件中心来发送和监听消息。
核心思想是：一个组件触发（emit）某个事件，另一个组件提前注册（on）对该事件的监听，当事件发生时自动执行对应逻辑。
如何实现一个简单的事件中心
可以封装一个轻量的 EventHub 类，用于管理事件的监听与触发：
class EventHub {
constructor() {
this.events = {};
}
// 监听事件
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
// 触发事件
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(callback => callback(data));
}
}
// 移除监听
off(event, callback) {
if (this.events[event]) {
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
}
}
将这个 EventHub 实例作为全局事件总线（event bus）或模块共享对象，即可在不同组件中使用。
在组件中使用自定义事件通信
假设我们有两个无直接关系的组件：一个按钮组件和一个显示区域组件。它们可以通过事件中心通信。
I-Shop购物系统
下载
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
- 按钮点击时，调用 eventHub.emit('updateText', '新的内容')
- 显示组件在挂载时，调用 eventHub.on('updateText', text => 更新视图)
- 这样，按钮无需知道谁接收消息，显示组件也无需知道消息来源
这种模式特别适合跨层级组件、兄弟组件或非父子关系组件之间的通信。
适用场景与注意事项
自定义事件系统适用于以下情况：
- 组件层级较深，props 逐层传递麻烦
- 多个组件需要响应同一状态变化
- 希望降低组件间的耦合度
但也要注意：
- 避免过度使用，否则会导致事件混乱、难以追踪
- 记得在组件销毁时移除事件监听（off），防止内存泄漏
- 建议对事件名进行统一管理（如常量定义），减少拼写错误
基本上就这些。自定义事件系统不是万能方案，但在合适场景下，它能让组件通信更清晰、更灵活。
