イベント

EventTarget#addEventListenerは特定のイベントが起きた時に、それに連動する形である処理を実行したい時に使います。よくあるのが要素をクリックしたら「ほげほげ」するというような処理です。それはこのように書かれます。

document.getElementById('button').addEventListener(
  'click',
  () => {
    console.log('clicked');
  }
);

1番目がイベントの名前、そして2番目に連動して実行したい処理（関数）です。ちなみに、addEventListenerには3番目の引数も設定できます。これは仮引数falseが渡っているのでデフォルトでは有効ではない形でイベントが設定されます。

3番目の引数はuseCaptureと書かれたりしていて、子要素で同名のイベントが起きた時に親から連動処理を実行するかを定めるものです。例を用意しました。

useCapturetrueuseCapturefalse

EventTarget#removeEventListeneraddEventListener

document.getElementById('button').removeEventListener(
  'click',
  () => {
    console.log('clicked');
  }
);

const onClick = () => {
  console.log('clicked');
};

addEventListenerremoveEventListener

const button = document.getElementById('button');
button.addEventListener('click', onClick);
button.removeEventListener('click', onClick);

純