問題一覧に戻る
中級dom
問題105: removeEventListener

removeEventListenerメソッドによるイベントリスナーの削除を学びましょう。removeEventListenerはaddEventListenerで登録したイベントハンドラを削除し、メモリリークを防ぐ重要なメソッドです。削除するためには、登録時と全く同じ関数参照を渡す必要があるため、アロー関数ではなく名前付き関数を使用するか、関数を変数に保存する必要があります。一時的なイベント処理や、コンポーネントのクリーンアップ時に必須です。

const element = {
  handlers: [],
  addEventListener: (e, fn) => element.handlers.push(fn),
  removeEventListener: (e, fn) => {
    element.handlers = element.handlers.filter(h => h !== fn);
  },
  trigger: () => element.handlers.forEach(fn => fn())
};

const handler = () => console.log("Handler");
element.addEventListener("click", handler);
element.trigger();

element.("click", handler);
element.trigger();