JavaScript DOMのクリック時とキー入力時のイベントと発火順序
JavaScript DOMのクリック時とキー入力時のイベントと発火順序
クリック時とキーボード入力時のの発火するイベントと発火順序をまとめておきます。
ブラウザ環境
試したブラウザは以下。
マウスクリック時のイベント
MouseEvent オブジェクトについては、
クリック時のイベントの種類
-
mousedownポインティングデバイス（マウス）のボタンを押した(pressed)ときに発火。
-
mouseupポインティングデバイス（マウス）のボタンを離した(released)ときに発火。
-
clickポインティングデバイス（マウス）のボタンを押して(pressed)、 離した(released)ときに発火。
-
dblclickポインティングデバイス（マウス）のボタンが、 2回クリックされたときに発火。
-
contextmenuマウスの右ボタンがクリックされたときに発火。
マウスクリック時のイベントの順序
クリック時のイベント発火順序は、以下になります。
基本は、mousedown → mouseup の後に該当のイベントが発火する。
ダブルクリックでは、クリック2回分のイベントの後に、 dblclickイベントが発火する。
| order | クリック時 | ダブルクリック時 | 右クリック時 | 右クリックのダブルクリック時 |
|---|---|---|---|---|
| 1 | mousedown | mousedown | mousedown | mousedown |
| 2 | mouseup | mouseup | mouseup | mouseup |
| 3 | click | click | contextmenu | contextmenu |
| 4 | mousedown | mousedown | ||
| 5 | mouseup | mouseup | ||
| 6 | click | contextmenu | ||
| 7 | dblclick |
※通常行わないが、右クリックのダブルクリックでは、dblclickイベントは発火しないようです。
テストしたソース：
gist.github.com
キーボード入力時のイベント
キーボードでもマウスと似たようなイベントが発火する。 keydown, keypress, keyup。
発火順序はマウスと少し違って、keydownとkeyup イベント間にkeypress というイベントが発火する。
| order | 一般的なキー入力時 | スペシャル(Alt, Shift) なキー入力時 |
|---|---|---|
| 1 | keydown | keydown |
| 2 | keypress | keyup |
| 3 | keyup |
※スペシャルキーでは、TabキーやZenkakuキーの挙動が違うようなので、 キー入力として扱わないか、 3つのイベント(keydown, keypress, keyup) を監視して.keyCodeが0 以外だったら入力扱いにする処理が必要そうだ。
参考リンク
