カクカクしかじか

技術的なアレコレ

JavaScriptで利用出来るイベントハンドラまとめ

はじめに

Vue.jsの勉強をしている時にJavaScriptで利用出来るイベントってclickイベントとかベタなやつしか知らないけど他に何があるんだろう?となったので自分用メモとしてまとめます📝

フォーム編

focus

要素にフォーカスが入った時

blur

要素のフォーカスが外れた時

select

テキストボックス/テキストエリアのテキストを選択した時

submit

フォームから送信した時

マウス編

click

要素をクリックした時

dblclick

要素をダブルクリックした時

mousedown

マウスのボタンを押した時

※ clickイベントとの違いは、clickイベントが完全なクリック操作の後、つまり、同じ要素内でマウスボタンを押して離した後で発生することで、mousedownイベントはボタンが最初に押された時点で発生する点が異なります。

mouseover

要素にマウスポインターが乗った時

mouseenter

要素にマウスポインターが乗った時

mouseleave

要素からマウスポインターが外れた時

mouseout

要素からマウスポインターが外れた時

mousemove

要素の中をマウスポインターが移動した時

キー編

keydown

キーを押した時

keyup

キーを離した時

keypress

キーを押し続けている時

その他編

resize

ウィンドウのサイズを変更した時

scroll

ページや要素をスクロールした時

error

ページ内でエラーが発生した時

contextmenu

コンテキストメニューを表示する前

コンテキストメニュー:有名な例は、Windowsでマウスの右ボタンをクリックするとマウスポインタの位置に現れる「右クリックメニュー」📝

参考

web-designer.cman.jp developer.mozilla.org