如何为自定义类实例添加非DOM绑定的事件监听器？

方案1：实现自定义事件发射器（Event Emitter） #

这是最通用、轻量的方案，完全不依赖DOM，专门解决纯类之间的解耦通信问题。

1. 封装通用的EventEmitter类 #

先写一个可复用的基础事件发射器，包含核心的事件监听、移除、触发逻辑：

class EventEmitter {
  private listeners: Record<string, Function[]> = {};

  // 添加事件监听
  addEventListener(eventName: string, callback: Function) {
    if (!this.listeners[eventName]) {
      this.listeners[eventName] = [];
    }
    this.listeners[eventName].push(callback);
  }

  // 移除事件监听
  removeEventListener(eventName: string, callback: Function) {
    if (!this.listeners[eventName]) return;
    this.listeners[eventName] = this.listeners[eventName].filter(fn => fn !== callback);
  }

  // 触发事件
  emit(eventName: string, ...args: any[]) {
    if (!this.listeners[eventName]) return;
    this.listeners[eventName].forEach(callback => callback(...args));
  }
}

2. 让Home类继承EventEmitter #

给Home类赋予事件处理能力，原有逻辑完全不受影响：

// 定义事件常量
class HomeEvent {
  static TEST = "home-animation-event";
}

class Home extends EventEmitter {
  // 你的Home类原有代码，比如管理内部HTMLElement的逻辑

  // 在需要触发事件的地方调用emit
  triggerTestEvent() {
    this.emit(HomeEvent.TEST, "可选的事件参数");
  }
}

3. 在App类中监听事件 #

直接通过Home实例绑定监听，不需要任何DOM元素：

class App {
  private home: Home;

  constructor() {
    this.home = new Home();
    // 绑定监听，注意用bind或箭头函数修正this指向
    this.home.addEventListener(HomeEvent.TEST, this.myFunction.bind(this));
    
    // 模拟触发事件（实际场景中由Home内部逻辑触发）
    this.home.triggerTestEvent();
  }

  private myFunction(arg: string) {
    console.log("收到Home的测试事件:", arg);
  }
}

方案2：用RxJS处理复杂事件流（适合大型项目） #

如果你的项目已经引入RxJS，或者需要处理节流、防抖、多事件组合等复杂场景，用Observable更合适：

1. 在Home类中创建Subject #

import { Subject } from "rxjs";

class HomeEvent {
  static TEST = "home-animation-event";
}

class Home {
  private testEvent$ = new Subject<string>();

  // 对外暴露可订阅的Observable
  onTestEvent() {
    return this.testEvent$.asObservable();
  }

  triggerTestEvent() {
    this.testEvent$.next("可选参数");
  }
}

2. 在App类中订阅事件 #

import { Subscription } from "rxjs";

class App {
  private home: Home;
  private eventSubscription?: Subscription;

  constructor() {
    this.home = new Home();
    // 订阅事件
    this.eventSubscription = this.home.onTestEvent().subscribe(arg => {
      this.myFunction(arg);
    });
  }

  private myFunction(arg: string) {
    console.log("收到Home事件:", arg);
  }

  // 记得在页面销毁时取消订阅，避免内存泄漏
  destroy() {
    this.eventSubscription?.unsubscribe();
  }
}

方案选择建议 #

• 简单场景选EventEmitter：无额外依赖，代码量小，上手快。
• 复杂异步场景选RxJS：强大的事件流处理能力，适合已有RxJS的项目。

内容的提问来源于stack exchange，提问作者fuzzyfluid