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 スクロールした時

終わりに

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

よかったらシェアしてね!
目次
閉じる