イベントの分類

イベントタイプ

webブラウザのバージョンアップに伴い、javascriptで取り扱えるイベントの種類は増えてきました。
また、DOMの仕様を策定するW3Cの活動や、HTML5の策定、
スマートフォン上でのタッチインタフェースの登場等に伴い新しいイベントが増えています。

注意が必要なのは、全てのイベントが全てのブラウザに標準搭載されているわけではなく、
動作するブラウザ環境やデバイスにより、javascriptで書けるイベントが異なる点です。

イベントは、その内容により大まかに分類ができます。
ここでは分類ごとにざっと把握します。

■デバイス依存の入力系イベント
keydown、keypress、keyup、等のキーボード系イベント、
mousedown、mousemove、mouseup、等のマウス系イベント、
touchmove、等のスマートフォン系イベント
等があげられます。

■デバイス独立の入力系イベント
textinputイベント、等のテキストボックスへ文字入力時に発生する入力イベント

■ユーザインタフェースイベント
HTMLフォーム要素で発生します。
前述のtextinputイベントもそうですが、フォームのセレクトボックスの切り替え時に発生するchangeイベント、
フォームのボタン押下時のsubmitイベント等

■状態変化イベント
ブラウザにオブジェクトがロードされた際のロードイベント、ブラウザの履歴系イベント、サーバ間通信時のイベント、ローカルファイルの読み書きで使用するイベント等

■API固有イベント
HTML5により登場した、ドラッグ&ドロップイベント、映像(video)や音声要素(audio)をとりあつかうイベント

■タイマー、エラー
javascriptの非同期イベント、タイマーやエラー処理等

レガシーイベント

レガシーイベントは古くから実装されているマウス、キーボード、HTMLフォーム、Windowオブジェクト関連のイベントです。
以降、ひとつひとつイベントを試して理解を進めます。

レガシーイベント：フォームイベント

フォームはwebページ内のフォーム要素に対してのイベントです。
HTML要素としてフォームは

<form>

</form>

タグとしてフォーム領域を定義していますが、フォームイベントはフォームに対してユーザが操作したイベントを実行することができます。
具体的にはフォームの送信時にsubmitイベント、フォームリセット時にresetイベント、フォーム要素を操作した時にはclickイベント、チェックボックスやセレクトボックスの操作でchangeイベント、テキストボックスには文字列を入力状態にした時にfocusイベント、入力状態を解除した際にはblurイベント、等のイベントがあります。

レガシーイベント：windowイベント

次にwindowイベントですが、ブラウザに関連したイベントが定義されています。
ブラウザにDOM構造を読み込み終わった(画面に表示された)際に発生するloadイベントや、その反対を意味するunloadイベント、
javascriptの実行時エラーに呼ばれるonerrorイベント、
また、ブラウザ全体ではなく、imgタグの単体のドキュメントに対してもloadイベントがを呼ぶことができます。

また、ブラウザの大きさを変更した場合のreziseイベント、ブラウザ上でスクロールをした時のscrollイベント、等もあります。

レガシーイベント：マウスイベント

画面上でマウスを動かしたり、クリックした際にマウスイベントが発生します。

マウスイベントが発生する箇所(DOM要素)は、マウスポインタのある箇所の要素で発生します。
ネストされている場合は、ポインタが指し示す一番深いDOM要素になります。
イベントオブジェクトにはマウスの座標等の情報が定義されています。

マウス操作のイベントには

mousemove
mousedown
mouseup
mouseover
mousewheel

等のイベントがあります。
上記のうち、mousedownとmouseupはclickイベントも発生します。
また、画面上のDOM要素の同じ箇所を2回clickするとdblclick(ダブルクリック)イベントが発生します。

画面上のDOMに対して、マウスが要素の上に移動した時にはmouseoverイベントが発生します。

mousewheelイベントは、マウスのホイールを回したときのイベントを発生させます。

レガシーイベント：キーイベント

ブラウザに対してキーボードがアクティブになっている場合、キーボードの何かのキーを押下したり離した時にイベントが発生しています。

キーボードイベントは主に以下のものがあります。

keydown
keyup
keypress

keydownはキーボードを押下した時、keyupはキーボードを離した時、keypressはキーボードを押しっぱなしにした時に発生するイベントです。
イベントが発生した時に渡されるイベントオブジェクトは、keyCodeを持ち、どのキーを押したのかという情報が入っています。

イベントタイプ