- Home ›
- JavaScript入門 ›
- イベント処理
発生したイベントの情報を取得する(Event)
イベントが発生して登録されたイベントハンドラやイベントリスナーが呼び出されると、一番目の引数に発生したイベントの情報が格納された Event オブジェクトが渡されてきます。イベントの情報は発生したイベントによって異なりますが、ここではイベントに共通しているイベントの情報を取得する方法について解説します。
(Last modified: )
Eventオブジェクトを受け取る
ターゲットとなる要素のプロパティに対してイベントハンドラを登録する場合と、 addEventListener メソッドを使ってイベントリスナーを登録した場合、イベントが発生すると登録したコールバック関数が呼び出されます。この時、一番目の引数に発生したイベントの情報が格納された Event オブジェクトが渡されてきます。
<input type="button" value="button" id="xxx">
<script>
function butotnClick(event){
console.log('Hello');
}
let button = document.getElementById('xxx');
button.addEventListener('click', butotnClick);
</script>
実際には click イベントのときは Event オブジェクトを継承した MouseEvent オブジェクトが渡されてきますし、 keydown イベントのときは Event オブジェクトを継承した KeyboardEvent オブジェクトが渡されてくるようにイベントの種類によって渡されてくるオブジェクトの種類は異なります。
MouseEvent オブジェクトと KeyboardEvent オブジェクトでは含まれる情報が異なりますが、固有の情報についての解説は個別のイベントの解説ページで行います。ここではそれぞれのイベントで共通して取得可能な Event オブジェクトで用意されている情報についてみていきます。
Eventオブジェクトで取得できる情報
Event オブジェクトのプロパティを参照することで取得できる情報は次のようなものがあります。
| プロパティ名 | 説明 |
|---|---|
| Event.bubbles | イベントがバブリングするかどうか |
| Event.cancelable | イベントがキャンセル可能かどうか |
| Event.currentTarget | イベントハンドラを登録した要素 |
| Event.eventPhase | イベントのフェーズ(キャプチャリングフェーズ、ターゲットフェース、バブリングフェーズ) |
| Event.target | イベントが発生した要素 |
| Event.timeStamp | 要素が作成されてからイベント発生までの経過時間(ミリ秒) |
| Event.type | イベントの種類を表す文字列 |
| Event.isTrusted | イベントがユーザーの操作によって発生したかどうか |
コールバック関数が呼び出されるときに引数として渡されてきた Event オブジェクトのプロパティを参照することで、発生したイベントに関する情報を取得できます。
※ Event.eventPhase で参照できる値は、 0：NONE 、 1：CAPTURING_PHASE 、 2：AT_TARGET 、 3：BUBBLING_PHASE となります。
※ Event.currentTarget と Event.target の違いについては「Event.currentTargetとEvent.targetの違いについて」を参照されてください。
次のサンプルを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<p>ボタンをクリックしてください。</p>
<input type="button" value="button" id="xxx">
<script>
let button = document.getElementById('xxx');
button.addEventListener('click', function(event){
console.log('bubbles :' + event.bubbles);
console.log('cancelable :' + event.cancelable);
console.log('currentTarget :' + event.currentTarget);
console.log('eventPhase :' + event.eventPhase);
console.log('target :' + event.target);
console.log('timeStamp :' + event.timeStamp);
console.log('type :' + event.type);
console.log('isTrusted :' + event.isTrusted);
});
</script>
</body>
</html>
ボタンをクリックすると発生したイベントの情報を参照しコンソールに出力します。
-- --
イベントに共通しているイベントの情報を取得する方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。