JavaScriptで使えるイベント一覧

スポンサーリンク

はじめに

今回はJavaScriptのイベントドリブンモデルにおけるイベント一覧をまとめます。
どんなイベントがあるんだっけと言う備忘録のため出来るだけ丁寧にまとめたいと思います。

イベントドリブンモデル??

下記の記事をまず読んでみてください

JavaScriptのイベントドリブンモデル(イベント駆動モデル)
https://hirocorpblog.com/javascript%e3%81%ae%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%83%89%e3%83%aa%e3%83%96%e3%83%b3%e3%83%a2%e3%83%87%e3%83%ab%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e9%a7%86%e5%8b%95%e3%83%a2%e3%83%87%e3%83%ab/

公式

イベントについてのまとめは実は公式のMDNがだしてくれています。

イベントリファレンス(MDN)
https://developer.mozilla.org/ja/docs/Web/Events

DOM イベントは、注目していることが発生したことをコードに通知するために送信されます。各イベントは event インターフェースに基づくオブジェクトで表され、発生したことに関する追加情報を取得するために追加のカスタムフィールドや関数を持つことがあります。イベントは、基本的なユーザー操作から、レンダリングモデルで起こっていることの自動通知までのすべてを表すことができます。

イベントの種類

イベントの種類はたくさんあるので、少しだけに抜粋しました!
フロントエンジニアではないので、transitionなどは省略します。
(やらなければいけなくなった時、追加するかも)

分類イベント名発生タイミング
読み込み系abort画像の読み込みを中断した時
読み込み系loadページ/画像の読み込みが完了した時
読み込み系unload他のページに移動するとき
読み込み系errorリソースをロードできなかったとき。
マウス系clickクリック時
マウス系dbclickダブルクリック時
マウス系mousedownマウスボタンを押した時
マウス系mouseupマウスボタンを離した時
マウス系mousemoveマウスポインターが移動した時
マウス系mouseoverマウスポインターが要素に乗った時
マウス系mouseoutマウスポインターが要素から外れた時
マウス系mouseenterマウスポインターが要素に乗った時
マウス系mouseleaveマウスポインターが要素から外れた時
マウス系contentmenuコンテキストメニューが表示される前
キー系keydownキーを押した時
キー系keypressキーを押している時(押している状態を継続している)
キー系keyupキーを離した時
フォーム系change内容が変更された時
フォーム系resetリセットボタンを押した時
フォーム系submit送信ボタンを押した時
フォーカス系blur要素からフォーカスが離れた時
フォーカス系focus要素がフォーカスされた時
その他resize要素のサイズを変更した時
その他scrollスクロールした時

終わりに

イベント一覧でどれがどのような違いがあるか、なかなかわかりにくいところはあるかもしれません。
一般的には公式をみてもらえれば一番かなと笑
日本語翻訳してくれた方に改めてお礼をお伝えしたいです笑
ありがとうございます

タイトルとURLをコピーしました