brushClover

JavaScriptを勉強したことを書いていくエントリーvol.6です。今回はイベントオブジェクト、組み込みオブジェクトである「argument」について書いていきます。

JavaScriptを勉強した際には大抵つまずくであろうfunction(e)の「e」。これはイベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができるイベントオブジェクトです。後述しますがJavaScriptの関数は引数を指定しなくてもOKなのでイベントオブジェクトを省略してもエラーとはなりません。

イベントオブジェクト

コールバック関数について改めて考えてみましょう。コールバック関数とはあらかじめ登録しておき、あるタイミングで呼び出される関数。そしてイベントをタイミングとして呼び出されるコールバック関数がイベントハンドラ、イベントリスナ。

実はイベントをタイミングとして呼び出す関数を「コールバック関数」ではなく「イベントハンドラ」、「イベントリスナ」と呼ぶのには理由があります。イベント発生時の情報をイベントオブジェクトとして引数に受け取ることができるのです。これはJavaScript側で自動的にイベントハンドラ、イベントリスナに指定したコールバック関数へ渡してくれるものです。

コードを見てみましょう。イベントハンドラとして設定したコールバック関数の引数にイベントオブジェクト「e」を設定しています。そして「e」はイベント発生時の情報を持つオブジェクトなので「e.target.id」のようにアクセスし、情報を得ることができます。

JSイベントハンドラにてイベントオブジェクトを受け取る

• 実行結果

var target_button = document.getElementById('target_button');

//イベントハンドラに渡されたイベントオブジェクトを「e」として使用する
target_button.onclick = function(e) {
    alert(e.target.id);
}

console.log(e)とかでオブジェクトを可視化して確認してみると構造が分かりやすいです。

イベントハンドラやイベントリスナには自動的にイベントオブジェクトが渡されるのはOKだと思います。しかし世の中のコードを見ていると引数に「e」を指定していないコードが結構あります。エラーは起きていないので、イベントハンドラ、イベントリスナとイベントオブジェクトの仕組みを理解すると混乱しやすいですよね。

関数の引数とオブジェクト「arguments」

実はJavaScriptでは関数の引数は無くても良く、エラーにはならないのです。また関数内では引数を暗黙的に組み込まれているオブジェクト「argments」で参照することができます。(おそらくこれがあるためエラーとしないと思われます。) またコードを見てみましょう。オブジェクト「arguments」は配列形式になっていて、イベントハンドラ、イベントリスナは第1引数にイベントオブジェクトを渡すため「arguments[0]」として参照することができます。

JSargumentsからイベントオブジェクトを参照

• 実行結果

var target_button = document.getElementById('target_button');

//この状態でもイベントハンドラにイベントオブジェクトは渡されている
target_button.onclick = function() {
    alert(arguments[0].target.id)
}

イベントハンドラに設定したコールバック関数に「e」を指定した場合と同じ挙動となります。一般的にはイベントハンドラやイベントリスナの中でイベントオブジェクトの情報を使いたいときには明示的に「e」と引数を受け取って関数内で使用しているみたいですね。

補足

関数の引数は自由に命名できます。target.onclick = function(event) {} でも問題ないです。ただJavaScritの慣習的には「e」と命名しますので、こっちを使う方が自分も他人も共通パターンとして認識しやすいです。for文のループ変数に「i」を使うのと同じです。