はじめに
今回は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/EventsDOM イベントは、注目していることが発生したことをコードに通知するために送信されます。各イベントは 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 | スクロールした時 |
終わりに
イベント一覧でどれがどのような違いがあるか、なかなかわかりにくいところはあるかもしれません。
一般的には公式をみてもらえれば一番かなと笑
日本語翻訳してくれた方に改めてお礼をお伝えしたいです笑
ありがとうございます