addEventListener の復習。

EventTarget.addEventListener() - Web API | MDN

こんな感じで、あるElementのクリック時の挙動を設定することができる。

const el = document.querySelector('#my-button')
el.addEventListener('click', () => { alert('hello') })

EventHandlerオブジェクトを登録する

イベントリスナーには、コールバック関数を指定することもできますが、 EventListener を実装したオブジェクトを指定することもでき、その場合は handleEvent() メソッドがコールバック関数として機能します。

下記の通り handleEvent() を持ったオブジェクトでイベントを制御することも可能。

const handler = {
  name: "toshimaru",
  handleEvent: function() {
    alert(this.name)
  }
}

こんな感じでオブジェクトをListenerとして登録すればOK.

const el = document.querySelector('#my-button')
el.addEventListener('click', handler) // toshimaru

下記の通り直接handleEventを直接listenerに登録してしまうと this のコンテキストが失われてしまい、うまく this.name が出力されない点に注意。

el.addEventListener('click', handler.handleEvent) // undefined

これを動かすには、bind() を使用した this の指定 が必要になる。

el.addEventListener('click', handler.handleEvent.bind(handler)) // toshimaru

関数でラップすればコンテキストは失われないので、こちらでも動く。

el.addEventListener('click', () => { handler.handleEvent() }) // toshimaru
el.addEventListener('click', function() { handler.handleEvent() }) // toshimaru

EventHandlerクラスを登録する

classとしてlistenerを登録することも可能。クラスのメンバ関数に handleEvent() を定義すればOK.

class Handler {
  constructor(name) {
    this.name = name
  }
  handleEvent() {
    alert(this.name);
  }
}

const el = document.querySelector('#my-button')
el.addEventListener('click', new Handler('toshimaru'))

EventHandlerをglobalに登録する

あまりやるべき実装ではないが、下記のようにグローバルな this オブジェクトに定義してやることも可能。

this.name = 'toshimaru'
this.handleEvent = function() {
  alert(this.name)
}

const el = document.querySelector('#my-button')
el.addEventListener('click', this)