読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

JavaScript DOMのクリック時とキー入力時のイベントと発火順序

Chrome Firefox JavaScript

JavaScript DOMのクリック時とキー入力時のイベントと発火順序

クリック時とキーボード入力時のの発火するイベントと発火順序をまとめておきます。

ブラウザ環境

試したブラウザは以下。

  • Windows7 64bit

    • Firefox Developer Edition 44.0a2

    • Chrome 46.0.2490.80 m (64-bit)

マウスクリック時のイベント

MouseEvent オブジェクトについては、 

developer.mozilla.org

クリック時のイベントの種類

マウスクリック時のイベントの順序

クリック時のイベント発火順序は、以下になります。

基本は、mousedownmouseup の後に該当のイベントが発火する。

ダブルクリックでは、クリック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

発火順序はマウスと少し違って、keydownkeyup イベント間にkeypress というイベントが発火する。

参考: 
developer.mozilla.org

order一般的なキー入力時スペシャル(Alt, Shift) なキー入力時
1 keydown keydown
2 keypress keyup
3 keyup  

※スペシャルキーでは、TabキーやZenkakuキーの挙動が違うようなので、 キー入力として扱わないか、 3つのイベント(keydown, keypress, keyup) を監視して.keyCodeが0 以外だったら入力扱いにする処理が必要そうだ。

ソースコード: 
gist.github.com