sugulogの日記

JavaScriptのイベントを扱うメソッド一覧。現役エンジニアが今まで使ったことのあるEventオブジェクトのメソッドを集めてみました。

スポンサードリンク

f:id:sugulog:20210503180434p:plain

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

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

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

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

 

今回は、現役エンジニアが今まで使ったことのあるEventオブジェクトのメソッドを集めてみました。ということで

  •  JavaScriptのイベントを扱うメソッド

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

その為このブログを読むことで、JavaScriptのイベントを扱うメソッドついて理解が深まるのはもちろん、何か困ったときのカンニングペーパーとして参考になります。

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

 

今回は、

  • Eventオブジェクト

  • JavaScriptのイベントを扱うメソッド

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

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

・Eventオブジェクト

Eventオブジェクトとはイベント発生時に呼び出される一番目の引数に渡されるイベント情報を受け取ることができるオブジェクトのことです。

f:id:sugulog:20210503172255p:plain

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

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

JavaScriptのイベントを扱うメソッド

・acceleration.x

X軸の加速度を取得するメソッドのこと。

・acceleration.y

Y軸の加速度を取得するメソッドのこと。

・acceleration.z

Z軸の加速度を取得するメソッドのこと。

・alpha

Z軸の傾きを取得するメソッドのこと。

・altKey

Altキーが押されたかどうかを真偽値で判定するメソッドのこと。

・beta

X軸の傾きを取得するメソッドのこと。

・bubbles

イベントがバブリング(親や祖先要素にも同じイベントを発生させる)かどうかを真偽値で判定するメソッドのこと。

・cancelable

イベントがキャンセルできるかどうかを真偽値で判定するメソッドのこと。

・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座標で取得するメソッドのこと。

sugulog.hatenadiary.jp

・clientY

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

sugulog.hatenadiary.jp

・code

押されたキーのコードを取得するメソッドのこと。

・ctrlKey

Ctrlキーが押されたかどうかを真偽値で判定するメソッドのこと。

・currentTarget

イベントハンドラを登録した要素を取得するメソッドのこと。

・dataTransfer

ドラッグ&ドロップ操作中にドラッグされているデータにアクセスするメソッドのこと。

・dataTransfer.files

ドラッグ操作中のファイルのリストにアクセスするメソッドのこと。

・gamma

Y軸の傾きを取得するメソッドのこと。

・isComposing

入力が未確定かどうかを真偽値で判定するメソッドのこと。

・isTrusted

イベントがユーザー操作によって発生したかどうかを真偽値で判定するメソッドのこと。

・key

押されたキーの値を取得するメソッドのこと。

・loaded

API等の現在の読み込み量を取得するメソッドのこと。

・metaKey

metaキー(mac:⌘)が押されたかどうかを真偽値で判定するメソッドのこと。

・offsetX

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

・offsetY

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

・pageX

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

・pageY

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

・preventDefault()

イベントのデフォルトの挙動をキャンセルするメソッドのこと。

sugulog.hatenadiary.jp

・repeat

キーを押しっぱなしにしているかどうかを真偽値で判定するメソッドのこと。

・request

リソースのリクエストを取得するメソッドのこと。

・screenX

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

・screenY

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

・shiftKey

Shiftキーが押されたかどうかを真偽値で判定するメソッドのこと。

・target

イベントが発生した要素を取得するメソッドのこと。

・target.response

リクエストタイプによってレスポンスのボディを返すメソッドのこと。

・target.responseText

読み取り専用で送信されたリクエストに続いてサーバーから受け取ったテキストを返すメソッドのこと。

・target.value

input要素等で入力された値を取得することができるメソッドのこと。

・timeStamp

イベントが発生した時刻(ミリ秒単位)を取得するメソッドのこと。

・total

API等の総容量を取得するメソッドのこと。

 

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

JavaScriptのイベントを扱うメソッドついて理解が深まり、何か困ったときのカンニングペーパーとして参考になりそうでしたか??

全てを覚えきるのは難しいのでカンニングペーパーとしてどんどん活用してください。

今回のToDo

より詳しく知りたいメソッドを1つ選び、さらに詳しく調べてみましょう(≧∀≦)/

 

最後に!!

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

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

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