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

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

確認環境
・Google Chrome

目次

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

  • 「イベント」は、ボタンをクリックしたなどの出来事です。
  • 「イベントハンドラ」は、「イベント」の応答として処理に繋げます。
  • 以下は、「イベントハンドラ」のサンプルです。
    7行目のボタン1をクリックすると「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

関連の記事

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

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る