イベントオブジェクトは、イベントハンドラーおよびイベントリスナーにおいて実行される関数の引数として受け取ることのできるオブジェクトです。そのイベントオブジェクトから、発生したイベントに関わる様々な情報（プロパティ）を知ることができ、またそのイベントを制御するメソッドを活用することができます。
関連ページ
イベントハンドラー／イベントリスナーについて[addEventListener]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="test" style="background:yellow;">クリックして下さい</div> <script> document.addEventListener('DOMContentLoaded', function(){ var test = document.getElementById('test'); function fnc1(e){ console.log(e.target); //イベントが発生した要素 console.log(e.type); //イベントの名前： console.log(e.timeStamp); //イベントの発生時間 console.log(e.pageX); //クリックされたX座標 } test.addEventListener( 'click', fnc1, false ); },false); </script> |
9行目
イベントリスナー関数（fun1）に引数を設定するとイベントオブジェクトを取得することができます。このeという名前は慣例的なもので、evと略すこともあります。
10〜13行目
具体的にいくつかのイベントオブジェクトのプロパティを取得しています。イベントオブジェクトのプロパティやメソッドは、発生したイベントによっても変化します。下記の例ではキーボード操作によるイベントを取得しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<input type="text" id="test"> <script> document.addEventListener('DOMContentLoaded', function(){ var test = document.getElementById('test'); function fnc1(e){ console.log(e.keyCode); //キーコードを取得 } test.addEventListener( 'keydown', fnc1, false ); },false); </script> |
他にも多くのプロパティ、ここでは説明していないメソッド、そしてイベントがあります。
参照ページ
