自分が今まで使用したことがあるJavaScriptのイベントハンドラについて書きました。
他にもいろいろあるかと思いますが、「こういうときにも使えるよー」っていうのがありましたら是非ご指摘お願いします。
| イベント名 | 条件 | 用途の例 |
|---|---|---|
| onclick | クリックされた時 | ボタン、モーダルなど。 |
| ondblclick | ダブルクリックされた時 | フォルダアイコンなど。Web制作ではあまり使わない気がする |
| onscroll | スクロールされた時 | トップへ戻るボタン、フェードインアニメーションなど。 |
| onchange | フォームの入力値や選択値の内容が変わった時 | フォームのバリデーションチェックなど。 |
| onblur | フォーカスが外れた時 | フォームのバリデーションチェックなど。 |
| onfocus | フォーカスが当たった時 | フォームのバリデーションチェックなど。 |
| onselect | 入力フォームの値を選択した時 | フォームのバリデーションチェックなど。 |
| onload | ページや画像が読み込まれた時 | ローディングアニメーションなど。 |
| onmouse...(Out, Over, Up) | マウスが離れた、乗った、クリックしたマウスを上げた時 | CSSでいうホバーアニメーションに当たる。ボタンやリンクのアニメーションや、ツールチップ |
| onMousemove | マウスを動かした時 | 昔マウス動かすと一生ついて来るイルカのように追尾する要素 マウスポインタの座標を取る時など。 |
| onKey..(UP, Down, Press) | キーを離した、キーを押した、キー押している間の時 | よりタイムリーなバリデーションチェック タイピングゲームなど。 |
WEB制作の場合はonclick, onload,onscroll はかなり使いましたね。
アプリ制作の場合はバリデーションチェックにonchange, onblurなど。
ゲーム制作とかするとより色々な表現が学べるのかなと思いますが、またおいおいアウトプットしていこうと思います。