JavaScript removeEventListenerイベントリスナ削除

nas2017/07/03

JavaScriptのremoveEventListenerメソッドで、イベントリスナを削除するサンプルです。

目次

サンプル removeEventListenerとは
イベントリスナを削除する

removeEventListenerとは

要素(オブジェクト).removeEventListener(イベントの種類, 関数[, オプション]);

イベントリスナを削除する

１．画面初期表示時に、下にある「クリックして下さい」という文言にイベントリスナが登録されます。「クリックして下さい」を押すと下の文言が変化します。
２．「イベントリスナを削除」ボタンを押すとイベントリスナを削除します。「クリックして下さい」を押しても下の文言は変化しません。
３．「イベントリスナを追加」ボタンを押すと再度イベントリスナが登録されます。

クリックして下さい

テストa

 

上記サンプルのコードです。

<p id="p1" style="color: red">クリックして下さい</p>
<p id="p2">テストa</p>
<input type="button" value="イベントリスナを削除" onclick="removeEL()" />
<input type="button" value="イベントリスナを追加" onclick="addEL()" />

<script>
  const p1 = document.getElementById("p1");
  p1.addEventListener("click", changeName1); // 画面表示時の設定

  function changeName1() { // 登録される関数
    const p2 = document.getElementById("p2");
    if (p2.textContent == "OK") {
      p2.textContent = "テストa";
    } else {
      p2.textContent = "OK";
    }
  }
  function removeEL() {
    p1.removeEventListener("click", changeName1); //登録された関数を削除
  }
  function addEL() {
    p1.addEventListener("click", changeName1); //関数を追加
  }
</script>

初期画面表示時は、7,8行目が実行され10行目の関数がイベントリスナに登録されます。
3行目の削除ボタン押下時は、18行目の関数が実行されます。
19行目は、removeEventListenerメソッドです。10行目の関数をイベントリスナから削除します。
関数自体は削除されません。
22行目は、10行目の関数をイベントリスナに追加します。イベントリスナへの関数のつけ外しは可能です。

関連の記事

JavaScript addEventListener イベントリスナを登録
JavaScript イベントのバブリングとは

△上に戻る