目次
イベントオブジェクトからマウスやキーボードに関する情報を取得する方法について見ていきます。
- イベントオブジェクト
- clientX,clientY
- key
イベントオブジェクト
・今回はマウスカーソルの座標の取得していく方法について見ていきます。
・前回書いたmousemoveの関数に引数を渡せば、ブラウザがイベントに関する情報をセットして渡してくれるという仕組みになっています。
・ここで渡される引数はイベントオブジェクトと呼ばれていて、慣習的に event の e がよく使われます。
・addEventListenerのあとに(‘mousemove’, e => {});というように書いていけばいいでしょう。
clientX,clientY
・今回は e.clientX 、 e.clientY を表示してみましょう。 clientX 、 clientYはブラウザの表示領域の左上を基準とした XY 座標になります。
・console.log(e.clientX, e.clientY);と書いていけばいいです。
key
・キーボードに関するイベントもあります。押したキーボードをコンソールで表示したい場合に使います。
・イベントは、キーを押したとき、という意味で keydown を使います。
・keydown の場合、イベントオブジェクトを渡して e.key としてあげれば、押したキーを取得することができます。
・(‘keydown’, e => {console.log(e.key);});というように書いていけばいいです。
