JS イベントハンドラを登録する３つの方法とイベント一覧

今回からいよいよ、「イベント」について見ていきます。

今までも例文の中で幾つか使用しているので、すでにお気づきの方も多いと思いますが、JavaScriptでのイベントとは、マウスをクリックしたり、スクロールしたり、ページを読み込んだりするような場合のことを言います。

そういった何かしらのアクションが起きた時に、実行する関数などのことを「イベントハンドラ」と呼びます。

イベントハンドラを登録する方法には、幾つかのパターンがありますので、まずはそれらについて見ていきましょう。

イベントハンドラを登録する
イベント一覧
あとがき

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

HTML属性

HTMLに直接登録する

イベントハンドラをHTML属性に登録するには、「on + event」で登録することが出来ます。

        <button onclick="alert('イベントハンドラ')" id="eventhtml">
          HTML属性
        </button>

複数の文を記述することも出来ます。

その際は「;」で繋ぎます。

また、HTML文ですので、大文字でも大文字と小文字の組み合わせでも動作しますが、通常は小文字で記述します。

関数を呼び出す

HTML属性に多くのコードを書くのは現実的はないので、関数を作って呼び出すと短いコードで済ますことが出来ます。

        <button onclick="datetime()" id="eventhtml">現在時刻</button>

function datetime() {
  let time = new Date();
  alert(time);
}

DOMプロパティ

基本的な使い方

DOMを使ってイベントハンドラを、「on + event」で登録することが出来ます。

        <input type="button" value="DOMプロパティ" id="dom" />

dom.onclick = function () {
  alert('DOMプロパティ');
};

HTMLの中に、JavaScriptが含まれなくなりました。

既存の関数を使う

既存の関数を使用することも出来ます。

先程紹介した、datetime関数を使用しています。

    <input type="button" value="DOM 既存の関数を使う" id="domf" />

domf.onclick = datetime;

なお、注意点として、「domf.onclick = datetime; 」の「datetime」が「datetime()」となっていないことを確認してください。

記述するのは「関数名」のみとなります。

イベントハンドラの解除

domf.onclick = null;

イベントハンドラを解除するには、「null」を代入します。

addEventListner

基本的な使い方

「addEventListner」を使った登録方法を見ていきます。

なお、「addEventListner」を使って登録したイベントハンドラを、「イベントリスナー」と呼ぶ場合があります。

addEventListner( event, listner);

構文は、イベントとlistnerを書くのが基本になります。

最後にoptionsを書くことも出来ますが、通常使うことはないと思います。

ここでの「listner」はコールバック関数のことになります。

さらに詳しい解説は、MDNのサイトで確認してください。

MDN：EventTarget.addEventListener()

    <input type="button" value="イベントリスナー" id="domevent" />

let getTIme = document.getElementById('domevent');
getTIme.addEventListener('click', datetime);

関数は、既存のdatetime関数を使用しています。

複数のイベントハンドラを登録する

    <input type="button" value="複数のイベントリスナー" id="events" />

function greeting1() {
  alert('Hello !');
}
function greeting2() {
  alert('Good Bye !');
}
let greet = document.getElementById('events');
greet.addEventListener('click', greeting1);
greet.addEventListener('click', datetime);
greet.addEventListener('click', greeting2);

こちらのボタンをクリックすると、3つのイベントリスナーが実行されます。

イベントリスナーの解除

greet.removeEventListener('click', greeting2);

イベントリスナーを解除するには、「removeEventListner」を使います。

解除する「addEventListner」と同じように記述してください。

イベント一覧

イベントの種類はとても沢山ありますので、そのすべてを紹介するのは無理なので、代表的なものを以下に紹介します。

すべてのイベントの種類を確認してみたい方は、以下のページで確認してみてください。

MDN：イベントリファレンス

マウスイベント

イベント（on + event）	動作
click	マウスをクリックした時
contextmenu	マウスを右クリックした時
dblclick	ダブルクリックした時
mouseover	マウスポインタが要素内に来た時
mouseout	マウスポインタが要素外に出た時
mousedown	マウスボタンを押している時
mouseup	マウスボタンを離した時
mousemove	マウスが移動した時
select	テキストが選択されている時
wheel	マウスホイールが回転している時

キーイベント

イベント（on + event）	動作
keydown	キーが押された時
keyup	キーが離された時

その他のイベント

イベント（on + event）	動作
submit	送信ボタンが押された時
focus	フォーカスされた時
blur	フォーカスを失った時
load	ページ全体が読み込まれた時
abord	エラー以外の原因で読み込みが中止された時
error	エラーが原因で読み込みが中止された時
reset	リセットボタンが押された時