JavaScript イベントとイベントハンドラのサンプル

JavaScriptのイベントとイベントハンドラのサンプルです。

確認環境
・Google Chrome

イベントとイベントハンドラのサンプル
イベントオブジェクト
イベントとイベントハンドラの一覧

イベントとイベントハンドラのサンプル

「イベント」は、ボタンをクリックしたなどの出来事です。
「イベントハンドラ」は、「イベント」の応答として処理に繋げます。
以下は、「イベントハンドラ」のサンプルです。
7行目のボタン１をクリックすると「click」イベントが発生し、イベントハンドラの「onclick」で2行目の関数に処理を繋げます。

<script>
function test1(){
	console.log("test1");
}
</script>

<input type="button" value="ボタン1" onclick="test1()">

イベントオブジェクト

上記コードのイベントハンドラにある関数の引数にeventオブジェクトを指定できます。

10行目は、test1の引数にeventを指定しています。
3行目は、eventオブジェクトのtargetプロパティです。イベントの発生元が表示されます。
6行目は、eventオブジェクトのtypeプロパティです。発生したイベント名が表示されます。

<script>
function test1(e){
	console.log(e.target);
	//<input type="button" value="ボタン1" onclick="test1(event)">

	console.log(e.type); //click
}
</script>

<input type="button" value="ボタン1" onclick="test1(event)">

以下は、MDNのeventのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Event

イベントとイベントハンドラの一覧

イベントとイベントハンドラの一覧です。

マウス
イベント	イベントハンドラ	発生するタイミング
click	onclick	クリックしたとき
dblclick	ondblclick	ダブルクリックしたとき
mouseup	onmouseup	マウスボタンを離したとき
mousedown	onmousedown	マウスボタンを押したとき
mousemove	onmousemove	マウスポインタが移動したとき
mouseover	onmouseover	マウスポインタが重なったとき
mouseout	onmouseout	マウスポインタが外れたとき
contextmenu	oncontextmenu	コンテキストメニューが表示されるとき

キー
イベント	イベントハンドラ	発生するタイミング
keydown	onkeydown	キーを押したとき
keypress	onkeypress	キーが押されているとき
keyup	onkeyup	キーを離したとき

読み込み
イベント	イベントハンドラ	発生するタイミング
load	onload	読み込みが完了したとき
unload	onunload	別のページに移動するとき
abort	onabort	読み込みが中断されたとき

フォーム
イベント	イベントハンドラ	発生するタイミング
change	onchange	内容が変更されたとき
reset	onreset	リセットボタンが押されたとき
submit	onsubmit	送信ボタンが押されたとき
select	onselect	テキストが選択されたとき
input	oninput	input要素の値が変化したとき

フォーカス
イベント	イベントハンドラ	発生するタイミング
blur	onblur	フォーカスが外れたとき
focus	onfocus	フォーカスされたとき

その他
イベント	イベントハンドラ	発生するタイミング
resize	onresize	サイズを変更したとき
scroll	onscroll	スクロールしたとき

以下は、MDNのイベントハンドラの詳細のリンクです。
https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Tutorial/More_Event_Handlers