KITASENJU DESIGN BLOG

memo, html, javascript, unity

TypescriptのEventDispatcher

EventDispatcher

export class EventDispatcher {
    private listeners: { [event: string]: Array<(data?: any) => void> } = {};
  
    on(event: string, listener: (data?: any) => void): void {
      if (!this.listeners[event]) {
        this.listeners[event] = [];
      }
      this.listeners[event].push(listener);
    }
  
    off(event: string, listener: (data?: any) => void): void {
      if (!this.listeners[event]) return;
      const index = this.listeners[event].indexOf(listener);
      if (index !== -1) {
        this.listeners[event].splice(index, 1);
      }
    }
  
    emit(event: string, data?: any): void {
      if (!this.listeners[event]) return;
      for (const listener of this.listeners[event]) {
        listener(data);
      }
    }
  }

使い方

const dispatcher = new EventDispatcher();

// リスナーの定義
const myListener = (data: any) => {
  console.log(`Received data: ${data}`);
};

// イベントの購読
dispatcher.on('myEvent', myListener);

// イベントの発火
dispatcher.emit('myEvent', 'Hello, World!');  // 出力: "Received data: Hello, World!"

// イベントの購読解除
dispatcher.off('myEvent', myListener);
"FOOTER"