JavaSctipt removeEventListenerメソッドでイベントリスナを削除するサンプル
環境
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="イベントリスナを削除" 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.「イベントリスナを追加」ボタンを押すと再度イベントリスナが登録されます。