EventTarget#addEventListener

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

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

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

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

外の四角はクリックすると「outer click」、中の四角はクリックで「inner click」とログするようになっています。そして外の四角のイベントはuseCaptureをtrueに設定しています。この状態で中の四角をクリックするとどうなるかというと、「outer click」から「inner click」の順番で呼ばれます。親の四角のイベントでuseCaptureをfalseとしているとこれは逆になります。

EventTarget#removeEventListener

EventTarget#removeEventListenerはaddEventListenerで設定した連動処理を解除するのに使います。気を付けることは、例えば上記の「clicked」とログするイベントを解除したい時に、

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

と書いても効かないということです。実は2番目の引数のハンドラーは同じものである必要があります。上記では、その場で定義した（ただし処理は同じんな）新しい関数を渡してしまっているので解除されません。
これを修正するにはハンドラーをちゃんと安定した場所に定義します。

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

そしてaddEventListener, removeEventListenerで使えば大丈夫です。

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