ywork2020.com

Title

イベントリスナーを削除する

目次 (INDEX)

removeEventListenerとは

ここで説明するremoveEventListener とは次の語句からなるjavascriptのメソッドです。
remove
読み: リムーブ
意味: 削除
event
読み: イベント
意味: 出来事
listener
読み: リスナー
意味: 聞く人

目次に戻る

removeEventListenerメソッドの概要

このメソッドは、イベントターゲットに登録されたイベントリスナーを削除します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

  • type: 削除するイベントリスナーのイベントの型を表す文字列を指定します。
  • listener: ターゲットから削除するEventListener関数を指定します。
  • options -> capture: イベントがDOMツリーで下位にある任意のEventTargetへ発送される前にlistenerへ発送されることを示す真偽値です。
  • useCapture: 削除するEventListenerがキャプチャーリスナーとして登録されているかを指定します。既定値はfalseです。
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

目次に戻る

サンプルコードと実行結果

ここでは、input要素button型を使用しました。この要素がクリックされることで登録してあるクリック型のイベントリスナーを削除します。

サンプルコード: HTML
<body>
	イベントの削除を実行:<br>
	<input type="button" value="実行" id="idRemoveExec">
	<script>...</script>
</body>
  • 03: input button (このボタンにイベントを追加、及び削除します。)
  • 04: script (プログラムを実行します。)
サンプルコード: script
<script>
	let elmRemoveExec = document.getElementById("idRemoveExec");
	let funcRemove = function(){
		elmRemoveExec.removeEventListener("click", funcRemove);
		window.alert("このクリックイベントは削除されました。");
		elmRemoveExec.value = "完了";
	}
	elmRemoveExec.addEventListener("click", funcRemove);
</script>
  • 02: elmRemoveExec (実行ボタンをElementオブジェクトとして取得します。)
  • 03-07: funcRemove (Functionオブジェクトを生成します。04~06:が関数の内容です。)
  • 04: removeEventListener() (funcRemoveをelmRemoveExecのクリックイベントから削除します。)
  • 05: alert() (アラートダイアログでリスナーが削除されたことを知らせます。)
  • 06: value = "完了" (実行ボタンの表示を「完了」に変更します。)
  • 08: addEventListener() (実行ボタンにfuncRemoveを登録します。)
実行結果:

イベントの削除を実行:

目次に戻る