IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

JavaScript のイベントオブジェクトを使ってみる

はじめに

ここでは、以下の記事を参考にしてイベントオブジェクトを使ってみることにする。

 

使ってみる

まずはイベントオブジェクトを出力してみる。

f:id:matt-note:20190211223526p:plain

f:id:matt-note:20190211223550p:plain

-> id="hoge" の要素をクリックすると、クリックイベントが発生し、その情報を格納しているイベントオブジェクトを出力することができた。イベントオブジェクトは、イベントを処理した要素の情報を格納しているため、clientX, clientY といった座標の値などが格納されている。

 

イベントオブジェクトは、イベントが起きた時にハンドラの引数として自動的に渡されるようになっている。ハンドラ内では、引数で渡されたイベントオブジェクトを使っていくことができるようになっている。

f:id:matt-note:20190211223659p:plain

 

なお、上記イベントオブジェクトの内部は以下のようになっている。

f:id:matt-note:20190211224108p:plain

 

イベントオブジェクトから座標を指定して出力してみる。

f:id:matt-note:20190211225152p:plain

f:id:matt-note:20190211225241p:plain

 

まとめ

イベントが起きた時に、ブラウザはイベントオブジェクトを作成する。イベント発生時に実行する関数(ハンドラ)は、引数でイベントオブジェクトを受け取って、ハンドラ内で処理できるようになっている。