ywork2020.com

Title

イベントリスナーを呼び出す

目次 (INDEX)

dispatchEventとは

ここで説明するdispatchEvent とは次の語句からなるjavascriptのメソッドです。
dispatch
読み: ディスパッチ
意味: 送る、送り出す、発送する
event
読み: イベント
意味: 出来事、行事

目次に戻る

dispatchEventメソッドの概要

このメソッドは、ターゲットにイベントを発送(伝播)します。

例えばターゲットになるbutton要素にクリックタイプのイベントリスナーを登録したとします。 この場合、ユーザーがターゲットをクリックすれば、クリックイベントが発生します。

しかし、ユーザーがクリックしない場合でも、dispatchEvent()を使えば、そのクリックイベントをプログラム側から発生させることができます。

このメソッドの本来の使い方は複数登録されているイベントリスナーを適切な順序で発送することにあります。 例えば、ページの読込みが終わった時点で一度に複数のイベント処理が発生するような場合にdispatchEvent()を使ってイベントを発送することで呼び出し順序を制御することが可能です。

目次に戻る

構文

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

  • event: ディスパッチされる Event オブジェクトです。
  • target: Event.targetを初期化し、どのイベントリスナーを呼び出すかを決定するのに使われます。
  • cancelled: このイベントを処理した少なくともひとつのイベントハンドラが Event.preventDefault() を呼び出した場合、戻り値は false となります。そうでなければ true となります。
cancelled = !target.dispatchEvent(event);

目次に戻る

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

ここでは1つのイベントオブジェクトを生成しています。イベントタイプは "evtHW" という名前にしています。 このイベントを、 addEventListener() を使って要素に登録しておき、dispatchEvent()でイベントを3回、発生させるといったサンプルです。

サンプルコード: CSS
<style>
	background-color: ##lightblue;
	border: thin solid ##royalblue;
	padding: 5px;
	width: fit-content;
</style>
サンプルコード: HTML
<body>
	<p id="idResult">Message:</p>
</body>
  • 02: p要素 (識別子=idResult / この要素のコンテンツに結果を表示します。)
サンプルコード: script
<script>
	let elmResult = document.getElementById("idResult");
	let evtName = new Event("evtHW");
	let funcName = function(){
		elmResult.insertAdjacentHTML("beforeend", "<br>Hello World!");
	}
	elmResult.addEventListener("evtHW", funcName);
	elmResult.dispatchEvent(evtName);
	elmResult.dispatchEvent(evtName);
	elmResult.dispatchEvent(evtName);
</script>
  • 02: elmResult (識別子=idResultの要素をElementオブジェクトとして取得します。)
  • 03: evtName (新しく生成したEventオブジェクトです。イベントタイプは"evtHW"としました。)
  • 04-06: funcName (Hello World!の文字を追加するための関数を作成しています。)
  • 07: addEventListener() (イベントリスナーを登録しています。イベントタイプは"evtHW", 実行される関数は funcName です。)
  • 08-10: dispatchEvent() (elmResultに登録してある"evtHW"イベントが発生して、関数が実行されます。)
実行結果:

Message:

目次に戻る