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

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

イベントハンドラ	イベントとイベントハンドラ
	イベントハンドラに関数を登録する
	イベントとイベントハンドラの一覧
	onSubmitのサンプル

イベントとイベントハンドラ

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

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

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

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

1行目のボタンをクリックすると「click」イベントが発生し、イベントハンドラの「onclick」に指定されているtest1()から4行目の関数test1が実行されます。

以下の1行目のように複数の関数の指定もできます。セミコロンで区切ります。

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

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

1行目のボタンをクリックすると5,8行目の文字列が出力されます。

イベントハンドラに関数を登録する

イベントハンドラに関数を登録し処理を実行できます。

<p id="p1">クリックして下さい</p>

<script>
  function test1() {
    console.log("testです");
  }

  const p1 = document.getElementById("p1");
  p1.onclick = test1;
</script>

4～6行目は、test1という関数です。
8行目は、getElementByIdメソッドで1行目を指定しています。
9行目は、関数のtest1をイベントハンドラに登録しています。
結果、1行目をクリックすると4行目の関数が実行されます。

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

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

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

JavaScript クリックで処理を実行する (onclick)

キー
イベント	イベントハンドラ	発生するタイミング
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/Web/Events

onSubmitのサンプル

onSubmitは指定された関数が実行された後にsubmitが実行されます。

<form name="form1" onSubmit="test1()">
  <input type="submit" value="ボタン" />
</form>
<script>
  function test1() {
    console.log("ボタンを押しました"); //
  }
</script>

ボタンを押すと関数のtest1が実行された後、submitが実行されます。