JavaScript イベントリスナを削除する(removeEventListener)

JavaScriptのイベントリスナの削除のサンプルです。
removeEventListenerメソッドを使用します。動くサンプルもあります。

確認環境
・Windows10
・Google Chrome

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

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

１．下にある「クリックして下さい」という文言に「テスト１」の文言が変化するイベントリスナが登録されています。「クリックして下さい」をクリックしてイベントリスナがあることを確認してください。
２．「削除」ボタンを押すとremoveEventListenerメソッドでイベントリスナを削除します。「クリックして下さい」を押しても文言は変化しなくなります。
３．「再度追加する」ボタンを押すと再度イベントリスナが登録されます。

クリックして下さい

テストa

コード

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

<p id="p1">クリックして下さい</p>
<p id="p2">テストa</p>
<input type="button" value="削除" onclick="clickBtn1()">
<input type="button" value="再度追加する" onclick="clickBtn2()">

<script>
const p1 = document.getElementById("p1");

p1.addEventListener("click",test1); //画面表示時の設定

function clickBtn1(){
	const p1 = document.getElementById("p1");
	p1.removeEventListener("click", test1);
}
function test1(){
	const str = document.getElementById("p2").textContent
	if(str=="OK"){
		document.getElementById("p2").textContent = "テストa";
	}else{
		document.getElementById("p2").textContent = "OK";
	}
}
function clickBtn2(){
	const p1 = document.getElementById("p1");
	p1.addEventListener("click",test1);
}
</script>

3行目のボタンをクリックすると11行目の関数を実行します。
9行目は、画面表示時にイベントリスナを登録しています。
13行目のremoveEventListenerメソッドでイベントリスナを削除しています。
removeEventListenerの2つ目の引数test1は、15行目の関数test1です。
25行目は「再度追加する」ボタン押下時のイベントリスナの登録です。

removeEventListenerメソッド

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

指定のイベントのイベントリスナ(関数とのひもづき)を削除します。関数自体は削除されません。
以下はMDNのremoveEventListenerメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener