基于TypeScript实现浏览器事件集中管理

class EventManager {
  private listeners: Map<string, Set<Function>>;
  constructor() {
    this.listeners = new Map();
  }
  public addEventListener(eventName: string, listener: Function): void {
    if (!this.listeners.has(eventName)) {
      this.listeners.set(eventName, new Set());
    }
    this.listeners.get(eventName)?.add(listener);
  }
  public removeEventListener(eventName: string, listener: Function): void {
    if (this.listeners.has(eventName)) {
      this.listeners.get(eventName)?.delete(listener);
    }
  }
  public dispatchEvent(eventName: string, eventArgs?: any): void {
    if (this.listeners.has(eventName)) {
      const listeners = this.listeners.get(eventName);
      listeners?.forEach((listener) => {
        listener(eventArgs);
      });
    }
  }
}

const eventManager = new EventManager();
// 注册一个事件监听器
eventManager.addEventListener('click', (event) => {
  console.log(`Clicked at (${event.clientX}, ${event.clientY})`);
});
// 触发一个事件
eventManager.dispatchEvent('click', { clientX: 100, clientY: 200 });
// 移除一个事件监听器
eventManager.removeEventListener('click', listener);