イベントハンドラー

イベントハンドラーについて

「要素を押した」など、ある動作を起こした時に発生するイベントに対して処理を行うことをイベントハンドラーといいます。
ここでは、イベントの一覧をご紹介します。

イベント一覧

  • ※ ここで掲載しているイベントは一部です。

マウスイベント

イベント名 説明
click クリックした時に発生
dblclick ダブルクリックした時に発生
contextmenu 右クリックした時に発生
mouseover マウスカーソルがのった時に発生
mouseenter マウスカーソルがのった時に発生
mouseout マウスカーソルが離れた時に発生
mouseleave マウスカーソルが離れた時に発生
mousedown マウスを押した時に発生
mouseup マウスを離した時に発生
mousemove マウスを動かしている時に発生
mousewheel マウスホイールを動かしている時に発生

ドラッグ・ドロップイベント

イベント名 説明
dragstart ドラッグを開始した時に発生
drag ドラッグ中の時に発生
dragend ドラッグを終えた時に発生
dragenter ドラッグした要素がドロップ領域に入った時に発生
dragover ドラッグした要素がドロップ領域の上にある時に発生
dragleave ドラッグした要素がドロップ領域から離れた時に発生
drop ドラッグした要素がドロップ領域にドロップされた時に発生

タッチイベント

イベント名 説明
touchstart タッチした(開始した)時に発生
touchmove タッチして動かしている時に発生
touchend タッチを離した(終了した)時に発生
touchcancel タッチを中断した時に発生
touchenter タッチ中にタッチイベントに対応した要素内にタッチした指が入った時に発生
touchleave タッチ中にタッチイベントに対応した要素内にタッチした指が離れた時に発生

マウス・タッチ総合イベント

イベント名 説明
pointerdown ポインタで押された(開始した)時に発生
mousedown、touchstartの統合
pointermove ポインタを動かしている時に発生
mousemove、touchmoveの統合
pointerup ポインタを離した(終了した)時に発生
mouseup、touchendの統合
pointerover ポインタがのった時に発生
mouseoverと同等
pointerout ポインタが離れた時に発生
mouseoutと同等
pointercancel ポインタを中断した時に発生
touchcancelと同等
pointerenter タッチ中にタッチイベントに対応した要素内にタッチした指が入った時に発生
mouseenter、touchenterの統合
pointerleave タッチ中にタッチイベントに対応した要素内にタッチした指が離れた時に発生
mouseleave、touchleaveの統合

キーボードイベント

イベント名 説明
keydown キーを押した時に発生
keyup キーを離した時に発生
keypress キーを押したあるいは離した時に発生

フレーム・オブジェクトイベント

イベント名 説明
load ページが読み込まれた時に発生
domcontentloaded CSS、画像、フレームの読み込みを除き、ページが読み込まれた時に発生
unload ページを離脱した時に発生
pageshow キャッシュが残った状態でページが表示された時に発生
pagehide キャッシュを残し、ページを離脱した時に発生
beforeunload ページを離脱しようとしている時に発生
scroll ページをスクロールした時に発生
resize ページがリサイズされた時に発生
error 画像の読み込み中にエラーが発生した時に発生
abort 画像の読み込みを中断した時に発生

フォームイベント

イベント名 説明
focus フォーカスが当たった時に発生
blur フォーカスが外れた時に発生
change フォームの選択や内容が変化した時に発生
ただし、input要素のtype属性がtextの場合など入力欄の場合は、フォーカスが外れた時に発生
submit フォームを送信しようとした時に発生
reset フォームがリセットされた時に発生
input
invalid

クリップボードイベント

イベント名 説明
copy クリップボードにコピーした時に発生
beforecopy クリップボードにコピーする前に発生
cut クリップボードへ切り取られた時に発生
beforecut クリップボードへ切り取られる前に発生
paste クリップボードから貼り付けられた時に発生
beforepaste クリップボードから貼り付けられる前に発生

トランジションベント

イベント名 説明
transitionend CSSのトランジションが終了した時に発生

アニメーションイベント

イベント名 説明
animationstart CSSのアニメーションを開始した時に発生
animationiteration CSSのアニメーションが繰り返された時に発生
animationend CSSのアニメーションが終了した時に発生

その他イベント

イベント名 説明
select 要素やテキストが選択された時に発生
selectstart 要素やテキストの選択を開始した時に発生
orientationchange デバイスが回転した時に発生
beforeprint 印刷前に発生
afterprint 印刷後に発生
readystatechange XMLHttpRequestの受信状況が変化したときに発生

mouseover、mouseenterについて

mouseover、mouseenterはどちらもマウスカーソルがのった時に発生するイベントですが、以下の違いがあります。

mouseoverイベントはmouseoverイベントが発火された要素の子要素もイベントの対象となり、処理がその分だけ発生してしまいます。
この現象をイベントバブリングといいますが、このイベントバブリングを無視するのがmouseenterイベントになります。

mouseout、mouseleaveについて

mouseover、mouseenterはどちらもマウスカーソルが離れた時に発生するイベントですが、以下の違いがあります。

mouseoutイベントはmouseoutイベントが発火された要素の子要素もイベントの対象となり、処理がその分だけ発生してしまいます。
この現象をイベントバブリングといいますが、このイベントバブリングを無視するのがmouseleaveイベントになります。

onpageshowについて

ブラウザの戻るボタンなどで前のページに戻った際に、最後の状態を保持(復元)することを、Back Forward Cacheと呼びますが、
このBack Forward Cacheを確認(検出)する場合は、引数「event」のpersistedプロパティを参照することで得ることができます。

JavaScript逆引きリファレンス一覧へ戻る