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

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

確認環境
・Google Chrome

目次

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

  • 「イベント」は、ボタンをクリックしたなどの出来事です。
  • 「イベントハンドラ」は、「イベント」を受けて処理に繋げます。

コード

以下は、「イベントハンドラ」を使用するサンプルです。

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

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

1行目のボタン1をクリックすると「click」イベントが発生し、イベントハンドラの「onclick」で4行目の関数test1が実行されます。

別の書き方

上記コードは、以下のようにも記述できます。

<input type="button" value="ボタン1" id="button1">

<script>
document.getElementById("button1").onclick = function(){
	console.log("test1");
}
</script>

onclickは1行目にありません。4行目にあります。
1行目のボタンをクリックすると5行目のconsole.logが実行されます。

イベントオブジェクト

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

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

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

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

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

以下は、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

関連の記事

JavaScript マウスイベントのサンプル
JavaScript イベントリスナを登録する(addEventListener)
JavaScript イベントリスナを削除する(removeEventListener)
JavaScript イベントのバブリングとキャンセル(stopPropagation)
JavaScript イベントを無効化する(preventDefault)

△上に戻る