JavaScriptイベント一覧

HTML/JS/CSS

JavaScriptイベントの種類をひたすら書きます。

スポンサーリンク

JavaScriptのイベント

JavaScriptのイベントとは、キーが押された、画面が開いたなどブラウザ上のアクションのことです。イベントに対応して実行される処理をイベントパンドラ(各イベントに1つしか定義できない)と言います。イベントリスナは、イベントパンドラと同じですが、複数定義できます。

イベントは扱うオブジェクトによって扱える種類が異なります。

JavaScriptイベント一覧

ウィンドウイベント

  • onafterprint
    • 印刷直後
  • onbeforeprint
    • 印刷直前
  • onbeforeunload
    • webページ遷移直前
  • onblur
    • フォーカスが外れた
  • onerror
    • JavaScriptエラーが発生
  • onfocus
    • フォーカスされた
  • onhashchange
    • URLのハッシュ(#以降)が変更
  • onload
    • webページ読み込みが完了(キャッシュの場合は除く)
  • onmessage
    • メッセージを受信
  • onoffline
    • ネットワーク環境がオンラインからオフラインへ変更
  • ononline
    • ネットワーク環境がオフラインからオンラインへ変更
  • onpagehide
    • 他のページへの遷移などでもとのページが隠された
  • onpageshow
    • webページ読み込みが完了(キャッシュの場合も含む)
  • onpopstate
    • 戻る/進むボタンでURL履歴(state)から履歴が取り出された
  • onredo
    • やり直す(redo)ボタンが押された
  • onresize
    • ウィンドウのサイズが変更された
  • onstrage
    • ローカルストレージもしくはセッションストレージが変更された
  • onundo
    • やり直す(undo)ボタンが押された
  • onunload
    • 他ページに移動した(キャッシュの場合は対象外)

フォームイベント

  • onblur
    • フォーカスが外れた
  • onchange
    • 変更された
  • onfocus
    • フォーカスされた
  • onformchange
    • フォームの値が変更された
  • onforminput
    • フォームの値が入力された
  • oninput
    • テキスト要素に入力された
  • oninvalid
    • 要素の無効な値が入力された
  • onselect
    • 要素が選択された
  • onsubmit
    • 送信(submit)ボタンがおされた

キーボードイベント

  • onkeydown
    • キーがおされた
  • onkeypress
    • キーを押して離された
  • onkeyup
    • キーが離された

マウスイベント

  • onclick
    • ボタンがクリックされた
  • oncontextmenu
    • マウスの右ボタンが押された
  • ondblclick
    • マウスがダブルクリックされた
  • ondrag
    • ドラッグされた
  • ondragend
    • ドラッグが終わった
  • ondragenter
    • ドロップ目標にドラッグされた
  • ondragleave
    • ドロップ目標からドラッグが外れた
  • ondragover
    • ドロップ目標上にドラッグされている
  • ondragstart
    • ドラッグが開始された
  • ondrop
    • ドロップ目標にドラッグがドロップされた
  • onmousedown
    • ボタンが押された
  • onmousemove
    • マウスポインタが移動された
  • onmouseout
    • マウスポインタが要素から外れた
  • onmouseover
    • マウスポインタが要素上に入った
  • onmouseup
    • ボタンを離した
  • onmousewheel
    • マウスホイールを回転させた
  • onscroll
    • スクロールバーを操作した

タッチイベント

  • touchstart
    • 指が置かれた
  • touchmove
    • 指がドラッグされた
  • touchend
    • 指が離れた

スマホのイベント

  • スマホの画面が縦横変わる
    • orientationchange

まとめ

・・・知らないのが沢山ありました。

いつの間にこんなに強化されていたんでしょ。1つずつ試してみましょ。

コメント