当前位置：首页 > JavaScript

js实现emit

2026-03-15 11:07:50JavaScript

实现事件发射器（Event Emitter）的 JavaScript 方法

在 JavaScript 中实现事件发射器（emit）的核心是管理事件监听器（listeners）并触发事件。以下是两种常见实现方式：

基于类的 EventEmitter 实现

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

  // 注册事件监听器
  on(eventName, listener) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(listener);
  }

  // 触发事件
  emit(eventName, ...args) {
    const listeners = this.events[eventName];
    if (listeners) {
      listeners.forEach(listener => listener(...args));
    }
  }

  // 移除事件监听器
  off(eventName, listenerToRemove) {
    const listeners = this.events[eventName];
    if (listeners) {
      this.events[eventName] = listeners.filter(
        listener => listener !== listenerToRemove
      );
    }
  }
}

使用示例：

const emitter = new EventEmitter();
emitter.on('click', (x, y) => console.log(`Clicked at ${x}, ${y}`));
emitter.emit('click', 100, 200); // 输出: Clicked at 100, 200

基于对象的简化实现

如果不需要完整的类实现，可以使用纯对象：

const createEmitter = () => {
  const events = {};
  return {
    on: (eventName, listener) => {
      events[eventName] = events[eventName] || [];
      events[eventName].push(listener);
    },
    emit: (eventName, ...args) => {
      (events[eventName] || []).forEach(listener => listener(...args));
    }
  };
};

// 使用
const emitter = createEmitter();
emitter.on('log', message => console.log(message));
emitter.emit('log', 'Hello World'); // 输出: Hello World

支持一次性监听器（once）

扩展上述实现以支持只触发一次的监听器：

js实现emit

class EventEmitter {
  // ...其他方法同前...

  once(eventName, listener) {
    const onceWrapper = (...args) => {
      listener(...args);
      this.off(eventName, onceWrapper);
    };
    this.on(eventName, onceWrapper);
  }
}