当前位置：首页 > 文章列表 > 文章 > 前端 > 深入JavaScript：自定义事件系统解析

深入JavaScript：自定义事件系统解析

2025-11-22 13:24:53 0浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《深入JavaScript：自定义事件系统》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

自定义事件系统是通过发布-订阅模式实现对象间解耦通信的机制，核心包括on、off、emit和once方法，可用于非DOM对象间的灵活消息传递，如购物车模块间通信，提升代码可维护性与扩展性。

深入JavaScript_自定义事件系统

在JavaScript中，自定义事件系统是一种强大的编程模式，它允许对象之间解耦通信。通过发布-订阅（Pub/Sub）机制，模块可以在不直接依赖彼此的情况下传递消息。这种模式广泛应用于前端框架、组件通信和状态管理中。掌握自定义事件系统，有助于构建更灵活、可维护的应用。

什么是自定义事件系统？

浏览器原生支持DOM事件，比如click、input等。但非DOM对象或业务逻辑之间也需要通信。自定义事件系统就是手动实现类似addEventListener和dispatchEvent的机制，让任意JavaScript对象可以监听和触发事件。

它的核心功能包括：

on：注册事件监听器
off：移除监听器
emit（或trigger）：触发事件并传递数据
once：绑定只执行一次的监听器

实现一个基础事件类

我们可以用一个简单的EventEmitter类来实现上述功能。使用对象存储事件名与回调函数列表的映射关系。

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  once(event, callback) {
    const wrapped = (...args) => {
      callback.apply(this, args);
      this.off(event, wrapped);
    };
    this.on(event, wrapped);
  }

  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(callback => {
        callback.apply(this, args);
      });
    }
  }

  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

这个类足够轻量，可用于组件间通信。例如，一个用户登录模块可以emit('login')，其他模块提前on监听该事件，收到通知后更新UI或请求数据。

实际应用场景举例

假设我们开发一个购物车系统，商品列表和总价显示是两个独立模块。使用事件系统可以让它们松耦合。

const eventBus = new EventEmitter();

// 商品列表模块
function addItemToCart(item) {
  // 添加逻辑...
  eventBus.emit('itemAdded', item);
}

// 总价模块
eventBus.on('itemAdded', function(item) {
  console.log(`商品 ${item.name} 已加入，刷新总价`);
  // 更新计算逻辑
});

addItemToCart({ name: '笔记本', price: 5000 });

这样，商品列表不需要知道谁接收消息，总价模块也不依赖具体添加逻辑，便于测试和扩展。