JavaScriptで使えるイベント一覧

2020 1/16

2020.01.16 2020.01.16

はじめに

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