實作 event 系統

題目：請用 JavaScript 製作出事件監聽系統(Event System)。

裡面必須包含 on , trigger, off 方法，請參考 jQuery 內的效果：

on : 註冊監聽處理程序(event handler)。
trigger : 觸發所有該監聽的調用(callback)方法。
off : 移除所有該監聽名稱的調用(callback)方法。

想法與實作

為了比較清楚解釋，作法寫在註解裡面。

class Events {
  // 初始化時給一個 key, value 的 js 物件 events
  constructor() {
    this.events = {}
  }

  // 註冊監聽事件處理器 on
  on(eventName, callback) {
    // 若有事件在 key 了，則繼續往後放入陣列
    if (this.events[eventName]) {
      this.events[eventName].push(callback)
    } else {
      // 若沒有，則初始新的 eventName 當作 key, callback 放入 value 裡面(陣列)。
      this.events[eventName] = [callback]
    }
  }

  // 觸發所有該名字(eventName)的事件,
  // 也就是上面 on 的 events 物件裡面的 key
  trigger(eventName) {
    if (this.events[eventName]) {
      for (let aCallback of this.events[eventName]) {
        aCallback()
      }
    }
  }

  // 移除所有某 eventName 的 callback
  off(eventName) {
    delete this.events[eventName]
    // 方法 2
    // this.events[eventName] = []
  }
}

這樣就完成啦！

本文同時發布於鐵人賽

實作 event 系統

想法與實作​

想法與實作