【JavaScript】イベント処理に使うaddEventListenerの書き方

今回はイベント処理に使うaddEventListenerのメソッドの書き方について紹介していきたいと思います。

addEventListenerとは

addEventListenerとはマウスによるクリックやフォーカス、からキーボードからの入力など様々なイベント処理を実行するためのメソッドになります。

addEventListenerの下記のパターンがあります。

対象要素.addEventListener(イベント名, 関数, false);

addEventListenerの第一引数にはイベント名を指定します。
イベント名は「click」、「scroll」などです。

書くときには下記の点に気を付けましょう。

上で指定した呼び出したい関数の書き方については下記のようになります。

function 関数名(e){
        ～
}

対象要素.addEventListener(イベント名, function() {
  // 処理を記述
}, false);

上記の書き方を参考にどのように記述するのかの例を紹介します。

画面全体を指定する場合はwindowをつかいます。

window.addEventListener('click', function() {
    console.log("クリックされました");
}, false);

<input id="num" type="text">

var elm = document.getElementById('num');
elm.addEventListener('focus', function() {
    console.log("フォーカスされました");
}, false);

下記はaddEventListenerで指定できる主なイベント名になります。

load	読み込みが完了したとき