発生したイベントの情報を取得する(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>

ボタンをクリックすると発生したイベントの情報を参照しコンソールに出力します。

Eventオブジェクトで取得できる情報(1)

-- --

イベントに共通しているイベントの情報を取得する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。