JS--発生したイベント情報の取得

発生したイベント情報の取得

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【Eventオブジェクトを受け取る】
ターゲットとなる要素（＜input＞など）のプロパティに対してイベントハンドラを登録する場合と、 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 オブジェクトが渡されてくるようにイベントの種類によって渡されてくるオブジェクトの種類は異なります。

【Eventオブジェクトで取得できる情報】
Event オブジェクトのプロパティを参照することで取得できる情報は次のようなものがあります。

コールバック関数が呼び出されるときに引数として渡されてきた Event オブジェクトのプロパティを参照することで、発生したイベントに関する情報を取得できます。

サンプル

ブラウザを立ち上げる

ボタンをクリックすると、コンソールに上のように表示される