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);