JavaScriptのイベントの登録方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptのイベントの登録方法について、HTMLでの登録方法とJavaScriptでの登録方法に分け、簡単に解説していきます。

JavaScriptでの登録方法

イベントはJavaScriptのイベントリスナで登録可能です。

<button type="button" id="hogeBtn">ほげボタン</button>

イベントを登録する要素は上記のようにid等で特定可能であることが前提です。

var onHogeBtnClick = function() {
    // クリック時の処理
}
var element = document.getElementById("hogeBtn");
element.addEventListener("click",onHogeBtnClick);

上記のように、要素のaddEventListenerメソッドで第一引数にイベント名、第二引数に関数を指定することでイベント登録可能です。

HTMLのタグの属性での登録方法

イベントはHTMLのタグの属性でも登録することができます。

var onHogeBtnClick = function() {
    // クリック時の処理
}

上記のように、まずはイベントに登録する関数が定義されていることが前提となります。

<button type="button" onclick="onHogeBtnClick();">ほげボタン</button>

上記のように、イベントを登録したい要素のHTMLのタグのonclick属性等に関数を指定することで、イベントを登録することができます。

イベントの詳細情報を取得する方法

登録したイベントの関数の中ではイベントの詳細を取得できます。

var onHogeBtnClick = function(event) {
    // クリック時の処理
    console.log(event);
}

上記のように、あらかじめ関数に引数を指定しておくことで、イベントの詳細を見ることができます。

<button type="button" onclick="onHogeBtnClick(event);">ほげボタン</button>

ただし、HTMLのタグのonclick属性等でイベントを登録した場合には、上記のように、属性内で呼び出す際にeventの引数を指定する必要があります。