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

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

目次

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

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

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

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

<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

関連の記事

JavaScript イベントのバブリングとは
JavaScript イベントを無効化する(preventDefault)

△上に戻る