sugulogの日記

JavaScript、イベント情報を扱うEventオブジェクト!Eventオブジェクトを取り扱うメソッドを集めてみた!!

スポンサードリンク

f:id:sugulog:20210503180434p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptのEventオブジェクトということで

  •  Eventオブジェクトを取り扱うメソッド

について簡単に解説します!!

その為このブログを読むことで、新しいEventオブジェクトに関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです!

また、新しいEventオブジェクトに関するJavaScriptメソッドに出会うたびに追記していきます!!

是非最後までご愛読ください。

 

今回は、

  • Eventオブジェクト

  • Eventオブジェクトに関するJavaScriptメソッド

の順で解説していきます。

では早速、みていきましょう!!

・Eventオブジェクト

イベント発生時に呼び出す関数で、引数としてイベント情報を受け取ることができるオブジェクト。

実際にEventオブジェクトを引数で受け取ってみましょう。

f:id:sugulog:20210503172255p:plain

上記のようにaddEventListenerの関数で受け取ることができます。

Eventオブジェクトにはイベントが発生した要素の参照や押されたキーなどの情報が含まれており、Eventオブジェクトを取り扱うメソッドを使用することでその情報を取得することができます。

Eventオブジェクトに関するJavaScriptメソッド

 イベントの情報を丸裸にするために日々学習した思い出順なのでご了承ください。

・altKey

Altキーが押されたかどうかを真偽値で判定する。

・changedTouches

各タッチ情報にアクセスする。配列となってインデックス0から順にタッチ情報を取得する。

f:id:sugulog:20210506221331p:plain

・changedTouches[インデックス].clientX

タッチされた座標のブラウザー左上を基準としたX座標を取得する。

・changedTouches[インデックス].offsetX

タッチされた座標の要素左上を基準としたX座標を取得する。

・changedTouches[インデックス].offsetY

タッチされた座標の要素左上を基準としたY座標を取得する。

・changedTouches[インデックス].pageX

タッチされた座標のページ左上を基準としたX座標を取得する。

・changedTouches[インデックス].pageY

タッチされた座標のページ左上を基準としたY座標を取得する。

・changedTouches[インデックス].screenX

タッチされた座標のデバイス左上を基準としたX座標を取得する。

・changedTouches[インデックス].screenY

タッチされた座標のデバイス左上を基準としたY座標を取得する。

・clientX

マウスがクリックされた座標のブラウザー左上を基準としたX座標を取得する。

・clientY

マウスがクリックされた座標のブラウザー左上を基準としたY座標を取得する。

sugulog.hatenadiary.jp

・code

押されたキーのコードを取得する。

例)event.code → KeyA

・ctrlKey

Ctrlキーが押されたかどうかを真偽値で判定する。

・isComposing

入力が未確定かどうかを真偽値で判定する。

・key

押されたキーの値を取得する。

例)event.key → a

・metaKey

metaキー(mac:⌘)が押されたかどうかを真偽値で判定する。

・offsetX

マウスがクリックされた座標の要素左上を基準としたX座標を取得する。

・offsetY

マウスがクリックされた座標の要素左上を基準としたY座標を取得する。

・pageX

マウスがクリックされた座標のページ左上を基準としたX座標を取得する。

・pageY

マウスがクリックされた座標のページ左上を基準としたY座標を取得する。

・preventDefault()

イベントのデフォルトの挙動をキャンセルする。

・repeat

キーを押しっぱなしにしているかどうかを真偽値で判定する。

・screenX

マウスがクリックされた座標のデバイス左上を基準としたX座標を取得する。

・screenY

マウスがクリックされた座標のデバイス左上を基準としたY座標を取得する。

・shiftKey

Shiftキーが押されたかどうかを真偽値で判定する。

 

以上、今回のブログでした。

新しいEventオブジェクトに関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか??

また新しい知識をどんどん蓄えていきますね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!