『これからのJavaScriptの教科書』では、イベントリスナーを削除する、または動作を中止する方法として2つの方法を挙げています。

• removeEventListener()を使用する（p.436）
• addEventListener()にオプションを設定し、一度だけ動作するイベントリスナーを設定する

実際にはもう1つ、AbortControllerオブジェクトを使用する方法があります。この記事では、AbortControllerオブジェクトを使ってイベントリスナーの動作を中止する方法を紹介します。

AbortControllerは非同期処理またはイベントのような、コールバックが呼び出される操作を中断するためのオブジェクトです。fetch オブジェクトでネットワーク上のデータを取得する処理を中断する際に使うことが多く、『これからのJavaScriptの教科書』でも「14-4-5 処理を中断する（p.542）」で取り上げています。詳しい仕組みや使い方は本記事では割愛しますが、基本的な使い方は次のコードのように、AbortControllerオブジェクトをインスタンス化し、インスタンス化したオブジェクトの signal プロパティを、fetch() メソッドや addEventListener() メソッドのオプションオブジェクトの、 signal プロパティに割り当てる（値として代入する）ようにします。

 

const abortController = new AbortController(); // AbortControllerオブジェクトをインスタンス化して代入
const signal = abortController.signal; // abortControllerインスタンスのsignalプロパティを定数signalに代入

 

この定数signalを、fetch() や addEventListener() のオプションに渡します。たとえば、addEventListener()なら3つ目の引数（オプションオブジェクト）の同名のプロパティに代入します。

 

element.addEventListener('EVENT', () => {
  // イベント発生時の処理
}, {sinal});

 

AbortControllerオブジェクトでイベントリスナーを解除する例を見てみます。次の例では、［click］ボタンをクリックするたびに大きく表示された番号が1ずつ増えていきます。しかし、［abort］ボタンをクリックすると、それ以降［click］ボタンをクリックしても数字が増えないようになります。

See the Pen
イベントリスナー解除w/AbortController by Studio947 (@studio947)
on CodePen.