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

2022年10月5日

環境
Google Chrome　 106.0.5249.91
Windows 10 Home 64bit

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

1.指定のイベントのイベントリスナ(関数とのひもづき)を削除します。

2.イベントリスナ削除後、再度イベントリスナに追加することは可能です。

removeEventListener() は EventTarget インターフェイスのメソッドで、以前に EventTarget.addEventListener() で登録されたイベントリスナーを取り外します。

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

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

2.構文

removeEventListener(type, listener);

removeEventListener(type, listener, options);

removeEventListener(type, listener, useCapture);

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

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>

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>

<!DOCTYPE html> <html> <body> <div id="cft" style="color: red">文字をクリックして下さい</div> <div id="show">oosaka</div> <p><input type="button" value="イベントリスナを削除" onclick="delFunc()" /><p> <p><input type="button" value="イベントリスナを追加" onclick="addFunc()" /> </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>

<!DOCTYPE html>
<html>
<body>

<div id="cft" style="color: red">文字をクリックして下さい</div>
<div id="show">oosaka</div>
<p><input type="button" value="イベントリスナを削除" onclick="delFunc()" /><p>
<p><input type="button" value="イベントリスナを追加" onclick="addFunc()" />
</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.「イベントリスナを追加」ボタンを押すと再度イベントリスナが登録されます。

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

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

JavaScript

Posted by arkgame

関連投稿: