概要
JavaScriptのイベントハンドリングの基本は（他の言語と同様に）、以下の手順を踏む。
- イベントを発生させるオブジェクトを生成する
- イベントリスナー（イベントハンドラー）を定義する
- その際、捕捉したいイベントを指定する
- イベントリスナーをオブジェクトに登録する
以下、JSにおけるイベントリスナーの登録手順を整理する。
基本形式
最も基本に忠実な手順を如何に例示する。
具体的には、ボタンを配置し、クリックに対するリスナーを定義し、そのリスナーをボタンに登録している。
|
1 2 3 4 5 6 7 8 9 10 |
<button id="button1">関数定義</button> <script> function onclick1() { alert("関数定義"); } var button1 = document.getElementById('button1'); button1.addEventListener('click', onclick1, false); </script> |
無名関数
以下の例では、無名関数としてリスナーを定義し、それを直接addEventListenerの引数としている。
無名関数を使っているので、リスナーを保持する変数は必要ない（リスナーに名前を付ける必要がない）。リスナーの処理内容が少ないときに使える。
|
1 2 3 4 5 6 |
<button id="button2">無名関数</button> <script> var button2 = document.getElementById('button2'); button2.addEventListener('click', (() => alert("無名関数")), false); </script> |
メソッドチェーン
以下の例では、ボタンオブジェクトの取得とリスナーの登録をメソッドチェーンで行い、さらにリスナーを無名関数で渡している。
リスナーの処理コード量が多いときは、無名関数ではなく通常の関数定義とする。
|
1 2 3 4 5 6 |
<button id="button3">対象連鎖</button> <script> document.getElementById('button3').addEventListener( 'click', (() => alert("オブジェクトチェーン")), false); </script> |