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

2022年10月5日

環境
Google Chrome　 106.0.5249.91
Windows 10 Home 64bit

関数
1.イベントリスナを削除します。
要素(オブジェクト).removeEventListener(イベントの種類, 関数[, オプション]);

1.指定のイベントのイベントリスナ(関数とのひもづき)を削除します。
2.イベントリスナ削除後、再度イベントリスナに追加することは可能です。
removeEventListener() は EventTarget インターフェイスのメソッドで、以前に EventTarget.addEventListener() で登録されたイベントリスナーを取り外します。

2.構文

removeEventListener(type, listener);
removeEventListener(type, listener, options);
removeEventListener(type, listener, useCapture);

type
文字列で、イベントリスナーを取り外すイベントの種類を表します。
listener
イベントターゲットから取り外すイベントハンドラーの EventListener 関数です
options
イベントリスナーに関する特性を指定する、オプションのオブジェクトです。

3.書式
const 変数名 = document.getElementById(セレクター名);
変数名.addEventListener(“click",関数名);

使用例

<!DOCTYPE html>
<html>
<body>

<div id="cft" style="color: red">文字をクリックして下さい</div>
<div id="show">oosaka</div>
<p><input type="button" value="イベントリスナを削除" /><p>
<p><input type="button" value="イベントリスナを追加" />
</p>
<script>

  const cft = document.getElementById("cft");
   // 画面表示時の設定
  cft.addEventListener("click",changeFunc);

  // 登録される関数 changeFunc
  function changeFunc() {
    const show = document.getElementById("show");
    if(show.textContent == "tokyo") {
      show.textContent = "oosaka";
      } else {
       show.textContent = "tokyo";
      }
  }
  //登録された関数を削除
  function delFunc() {
    cft.removeEventListener("click",changeFunc);
  }
 // 関数を追加
  function addFunc() {
    cft.addEventListener("click",changeFunc); 
  }
</script>

</body>
</html>

実行結果

1.「文字をクリックして下さい」を押すと、「oosaka」から「tokyo」に変わります。
2.「イベントリスナを削除」ボタンを押すとイベントリスナを削除します。「クリックして下さい」を押しても文字が変化しません
3.「イベントリスナを追加」ボタンを押すと再度イベントリスナが登録されます。

JavaScript

Posted by arkgame