ywork2020.com

Title

イベントリスナーを登録する

目次 (INDEX)

addEventListenerとは

ここで説明するaddEventListener とは次の語句からなるjavascriptのメソッドです。
add
読み: アド
意味: 加える、追加する
event
読み: イベント
意味: 出来事
listener
読み: リスナー
意味: 聞く人

目次に戻る

addEventListenerメソッドの概要

addEventListenerとは、Webページで任意のタイミングやユーザーが起こすアクションのタイミングなどのイベントターゲットにイベントを登録するためのメソッドです。 例えば「ユーザーが任意の要素をクリックした」とか「ページデータが全て読み込まれた」などの任意のタイミングでイベントを登録できます。

つまり、イベントを登録するとは、任意のタイミングやユーザーアクションで発生するイベントに対して、関数の実行を登録するということです。 また、イベントが実行されるとは、イベント名や直接に登録されたイベントリスナー関数の呼び出しが行われて実行されることを言います。

イベントリスナーからは、任意の名前で作成された関数を呼び出すこともできます。また、イベントリスナー内に直接、関数を記述することもできます。

目次に戻る

構文

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

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

目次に戻る

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

ここでは、ボタンにイベントリスナーを使ってクリックイベントを登録しています。 イベントリスナーは複数登録することができます。 例えば、この要素にクリックイベントとマウスオーバーイベントを重複して登録することができます。

サンプルコード: HTML
<body>
	<button id="idButton">ボタン</button>
	<script>...</script>
</body>
  • 02: button (識別子=idButtonをもつbutton要素です。)
  • 03: script (プログラムを実行します。)
サンプルコード: script

イベントリスナーに直接、関数を書く場合

<script>
	let elmButton = document.getElementById("idButton");
	elmButton.addEventListener("click", function(){
		window.alert("クリックイベントが発生しました。");
	},false);
</script>
  • 02: elmButton (idButtonの要素を取得したElementオブジェクトです。)
  • 03-05: addEventListener() (クリックイベントに関数を登録します。)
  • 04: alert() (アラートダイアログにメッセージを表示します。)

イベントリスナーから関数オブジェクトを呼び出す場合

<script>
	let elmButton = document.getElementById("idButton");
	let evtFunction = function(){
		window.alert("クリックイベントが発生しました。");
	}
	elmButton.addEventListener("click", evtFunction, false);
</script>
  • 02: elmButton (idButtonの要素を取得したElementオブジェクトです。)
  • 03-05: evtFunction (変数に関数を代入しています。)
  • 04: alert() (アラートダイアログにメッセージを表示します。)
  • 06: addEventListener() (クリックイベントに関数を登録します。)
実行結果:

目次に戻る

参考: 任意のタイミングにイベントリスナーを登録する

addEventListenerを使うとユーザーアクションだけでなく、プログラム実行状況のタイミングにもイベントを登録することができます。

DOMツリーの構築が完了したタイミングで実行する
document.addEventListener("DOMContentLoaded",function(){
	任意のスクリプト処理コード;
},false);

DOMツリーの構築と画像などの読込みも全て完了したタイミングで実行する
window.addEventListener("load", function(){
	任意のスクリプト処理コード;
},false);

目次に戻る