JavaScript removeEventListenerイベントリスナ削除

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

目次

説明 removeEventListenerメソッド
サンプル イベントリスナを削除する

removeEventListenerメソッド

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

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

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

クリックして下さい

テスト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 イベントのバブリングとは
JavaScript イベントを無効化する(preventDefault)
JavaScript イベントとイベントハンドラのサンプル

△上に戻る