JavascriptのEventオブジェクトについて – 業務プログラムの実践学習

１．function(e) {} の引数eの意味合い

引数eはイベントオブジェクトです。イベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができる。
JavaScriptの関数は引数を指定しなくてもOKなので、イベントオブジェクトを省略してもエラーとはならないので、省略される場合もあり。
イベントの発生タイミングで呼び出す関数を「コールバック関数」ではなく、「イベントハンドラ」or「イベントリスナ」と呼ぶ。
イベント発生時の情報をイベントオブジェクトとして引数に受け取ることができる。これはJavaScript側で自動的に、イベントハンドラに指定したコールバック関数へ渡してくれるもの。
イベントハンドラとして設定したコールバック関数の引数にイベントオブジェクト「e」を設定しています。「e」はイベント発生時の情報を持つオブジェクトなので「e.target.id」のように情報を得ることが可能。

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

//イベントハンドラに渡されたイベントオブジェクトを「e」として使用する

button.onclick = function(e) {

alert(e.target.id);

}

関数の引数とオブジェクト（argument）

JavaScriptでは関数の引数は無くても良く、エラーにはならない。
関数内では引数を暗黙的に組み込まれているオブジェクト「argments」で参照することができる。
オブジェクト「arguments」は配列形式になっていて、イベントハンドラ、イベントリスナは第1引数にイベントオブジェクトを渡すため「arguments[0]」として参照することができる。イベントハンドラに設定したコールバック関数に「e」を指定した場合と同じ挙動となる。
一般的にはイベントハンドラやイベントリスナの中でイベントオブジェクトの情報を使いたいときには明示的に「e」と引数を受け取って関数内で使用している。

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

//この状態でもイベントハンドラにイベントオブジェクトは渡されている

button.onclick = function() {

alert(arguments[0].target.id)

}

ハンドラ関数の引数を渡し方

（例）

<!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()">テスト１</button>
    <button id="btn2" onClick="test(arguments[0])">テスト２</button>
    <button id="btn3" onClick="test2(arguments[0], 'test')">テスト３</button>
    <button id="btn4" >テスト４</button>
    <button id="btn5" >テスト５</button>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

テスト１：undefined表示。test関数が引数なしとして実行されている。最後が()になっているので、ハンドラを渡しているのでなく、実行されている。
テスト２：eventオブジェクト表示とtest関数が引数ありとして実行されている。最後が()になっているので、ハンドラを渡しているのでなく、実行されている。
テスト３：eventオブジェクト表示。"test"文字表示。test2関数が引数ありとして実行されている。最後が()になっているので、ハンドラを渡しているのでなく、実行されている。
テスト４：eventオブジェクト表示。
テスト５：eventオブジェクト表示と"test"文字表示。無名関数でbtn5のクリックイベントのハンドラを渡し、無名関数の中で、test2を実行している。最後が()になっている。event引数を無名関数からtest2に渡している。