JavaScript入門イベント様々なイベント

キーボード操作に関するイベントを、マウス操作に関するイベント、カット、コピー、ペースなどに関わるイベント、フォーカスに関わるイベント、スクロールや画面タッチに関わるイベント、アニメーションに関わるイベント、画面に関わるイベントについて解説。

キーボード操作に関するイベント

イベントタイプ	発火タイミング
input	<input>要素のvalue属性の値や<textarea>のコンテンツが変化するたびに発火する
change	<input>要素のvalue属性の値や<textarea>のコンテンツ値が確定したタイミングで発火する。<textarea>や<iput type=”text”>などの入力欄に対する変更の検知は、値の変更後、フォーカスが外れるまで行われない。入力中の文字列の変更を検知したい場合には、inputイベント、keydownイベント、compositionupdateイベントを使う
keydown	任意のキーが押し込まれた時に発火
keypress（非推奨）	代わりにkeydownイベントを使用する
keyup	任意のキーを離すタイミングで発火する
compositionstart	IMEによる編集セッションが開始したタイミングで発火する
compositionend	IMEによる変種セッションが終了したタイミングで発火する。すなわち、漢字などの変換が確定した時、または編集をキャンセルしたタイミングで発火する
compositionupdate	IMEによる編集セッション中で文字が追加されたときに発火する
submit	フォームが送信されたときに発火する

イベントタイプ	発火タイミング
click	マウスの左クリックが押された時に発火する
dblclick	マウスの左クリックを２回連続で押されたとき発火する
contexmenu	コンテキストメニューを開くときに発火する。すなわち、マウスの右クリック、またはメニューキーが押されたときに発火する
mousedown	マウスでクリックされたときに発火する。左クリック、右クリックどちらでも発火する
mouseup	マウスのクリックが離されるときに発火する。左クリック、右クリックどちらでも発火する
mouseenter	カーソルが要素内に入るタイミングで発火する。バブリングは発生しない。
mouseover	カーソルが要素、またはその子要素を通過するときに発火する。バブリングが発生する。
mousemove	カーソルが要素内で移動している間に連続的に発火する
mouseleave	カーソルが要素から出た時に発火する。バブリングは発生しない。
mouseout	カーソルが要素から出た時に発火する。バブリングは発生する。

イベントタイプ	発火タイミング
focusin	要素にフォーカスが当たった時に発火する。バブリングが発生する
focus	要素にフォーカスが当たったときに発火する。バブリングが発生しない
focusout	要素からフォーカスが外れたときに発火する。バブリングが発生する
blur	要素からフォーカスが外れたときに発火する。バブリングが発生しない

イベントタイプ	発火タイミング
scroll	コピー操作を行ったときに発火する
wheel	ペースト操作を行ったときに発火する
mousewhell（非推奨）	カット操作を行ったときに発火する
touchstart	スマホのタッチ入力が開始されたタイミングで発火する
touchmove	スマホのタッチ操作が継続している間は連続的に発火する
touched	スマホのタッチ入力が終了したタイミングで発火する

アニメーションに関わるイベント

イベントタイプ	発火タイミング
transitionstart	CSSのtransitionプロパティによるアニメーション開始時に発火する。トランジションの遅延（transition-delay）を待ってから発火する
transitionrun	CSSのtransitionプロパティによるアニメーション開始時に発火する。トランジションの遅延（transition-delay）を待たずに発火する
transitionend	CSSのtransitionプロパティによるアニメーション終了時に発火する
animationstart	CSSのanimationプロパティによるアニメーション開始時に発火する。アニメーションの遅延（animation-delay）を待ってから発火する
animationend	CSSのanimationプロパティによるアニメーション終了時に発火する。すなわち、animation-iteration-countで指定した回数分アニメーションが実行された後に発火する
animationiteration	CSSのanimationプロパティによるアニメーション1回ループしたタイミングで発火する。すなわち、animation-iteration-countに設定された回数だけ発火する

イベントタイプ

発火タイミング

load

CSS（.css）／JS（.js）ファイル、画像などのHTMLから読み込んでいるすべてのリソースが読み込み完了した時点で発火する

DOMContentLoaded

DOMツリーの構築が完了した時点で発火する。DOM操作が行える状態になったことを表す最初のイベント。CSS（.css）／JS（.js）ファイル、画像などの読込は完了していない可能性がある。Documentオブジェクトに対するイベントリスナとしても登録可能。

readystatechange

Documentオブジェクトに登録可能なイベントタイプ。画面の読込フェーズが変わったタイミングで発火する。readyStateプロパティによって、現在どのフェーズかを判断できる。
document.readyStateプロパティに値

値	説明
loading	画面ロード中。DOMツリーの構築も完了していない
interactive	DOMツリーの構築が完了している（DOMContentLoadedとな時状態）
complete	loadイベントの直前に発火する。HTML及びHTMLで読み込んでいるリソース（CSS/JSファイル、画像など）の読込も完了している

beforeunload

現在表示中のページがアンロードされる直前に発火する。

unload

現在表示中のページがアンロードされるときに発火する。

resize

画面サイズが変更されたときに発火する

online

ブラウザがネットワーク接続を検知したタイミングで発火する

offline

ブラウザがネットワーク接続の切断を検知したタイミングで発火する

カテゴリー:JavaScript