1.function(e) {} の引数eの意味合い
- 引数eはイベントオブジェクトです。イベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができる。
- JavaScriptの関数は引数を指定しなくてもOKなので、イベントオブジェクトを省略してもエラーとはならないので、省略される場合もあり。
- イベントの発生タイミングで呼び出す関数を「コールバック関数」ではなく、「イベントハンドラ」or「イベントリスナ」と呼ぶ。
- イベント発生時の情報をイベントオブジェクトとして引数に受け取ることができる。これはJavaScript側で自動的に、イベントハンドラに指定したコールバック関数へ渡してくれるもの。
- イベントハンドラとして設定したコールバック関数の引数にイベントオブジェクト「e」を設定しています。「e」はイベント発生時の情報を持つオブジェクトなので「e.target.id」のように情報を得ることが可能。
1 2 3 4 |
//イベントハンドラに渡されたイベントオブジェクトを「e」として使用する button.onclick = function(e) { alert(e.target.id); } |
関数の引数とオブジェクト(argument)
- JavaScriptでは関数の引数は無くても良く、エラーにはならない。
- 関数内では引数を暗黙的に組み込まれているオブジェクト「argments」で参照することができる。
- オブジェクト「arguments」は配列形式になっていて、イベントハンドラ、イベントリスナは第1引数にイベントオブジェクトを渡すため「arguments[0]」として参照することができる。イベントハンドラに設定したコールバック関数に「e」を指定した場合と同じ挙動となる。
- 一般的にはイベントハンドラやイベントリスナの中でイベントオブジェクトの情報を使いたいときには明示的に「e」と引数を受け取って関数内で使用している。
1 2 3 4 |
//この状態でもイベントハンドラにイベントオブジェクトは渡されている button.onclick = function() { alert(arguments[0].target.id) } |
ハンドラ関数の引数を渡し方
(例)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript"> window.onload = function () { document.getElementById("btn4").onclick = test; document.getElementById("btn5").onclick = function(event){ test2(event, "test"); }; } function test(event) { alert(event); } function test2(event, param) { alert(event); alert(param); } </script> </head> <body> <button id="btn1" onClick="test()">テスト1</button> <button id="btn2" onClick="test(arguments[0])">テスト2</button> <button id="btn3" onClick="test2(arguments[0], 'test')">テスト3</button> <button id="btn4" >テスト4</button> <button id="btn5" >テスト5</button> </body> </html> |
- テスト1:undefined表示。test関数が引数なしとして実行されている。最後が()になっているので、ハンドラを渡しているのでなく、実行されている。
- テスト2:eventオブジェクト表示とtest関数が引数ありとして実行されている。最後が()になっているので、ハンドラを渡しているのでなく、実行されている。
- テスト3:eventオブジェクト表示。"test"文字表示。test2関数が引数ありとして実行されている。最後が()になっているので、ハンドラを渡しているのでなく、実行されている。
- テスト4:eventオブジェクト表示。
- テスト5:eventオブジェクト表示と"test"文字表示。無名関数でbtn5のクリックイベントのハンドラを渡し、無名関数の中で、test2を実行している。最後が()になっている。event引数を無名関数からtest2に渡している。