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

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

removeEventListenerメソッド

サンプル (removeEventListenerメソッド)

1.下にある「クリックして下さい」という文言をクリックすると「テスト1」の文言が変化するというイベントリスナが登録されています。「クリックして下さい」をクリックしてイベントリスナがあることを確認してください。
2.「削除」ボタンを押すとイベントリスナが削除されます。「クリックして下さい」を押しても文言は変化しません。
3.「再度追加する」ボタンを押すと再度イベントリスナが登録されます。

クリックして下さい

テストa

コード

上記サンプルのコードです。
13行目でイベントリスナを削除しています。
removeEventListenerの2つ目の引数test1は、15行目の関数test1です。
8行目は、画面表示時にイベントリスナを登録しています。
26行目は「再度追加する」ボタン押下時にイベントリスナを登録します。

<body >
<p id="p1">クリックして下さい</p>
<p id="p2">テストa</p>
<input type="button" value="削除" onclick='btn1_click()'>
<input type="button" value="再度追加する" onclick='btn2_click()'>
<script>
var t1 = document.getElementById('p1');
t1.addEventListener("click",test1); //画面表示時の設定

function btn1_click(){
	// イベントリスナを削除
	var t1 = document.getElementById('p1');
	t1.removeEventListener('click', test1);
}
function test1(){
	var str = document.getElementById("p2").innerHTML
	if(str=='OK'){
		document.getElementById("p2").innerHTML = "テストa";
	}else{
		document.getElementById("p2").innerHTML = "OK";
	}
}
function btn2_click(){
	// イベントリスナを登録
	var t1 = document.getElementById('p1');
	t1.addEventListener("click",test1);
}
</script>
</body>

関連の記事

JavaScript イベントリスナを登録するサンプル(addEventListener)
JavaScript イベントとイベントハンドラの一覧




△上に戻る