UnsplashのNikola Majksnerが撮影した写真

はじめに

HTML要素がクリックされた時などのイベントでJavaScriptを呼び出す方法はaタグ、buttonタグ、inputタグを使う方法などありますが、

この記事ではJavaScriptのイベントリスナーを使う方法についてまとめています。

イベントの追加・削除

イベントの追加・削除について、以下３つをご説明します。

・イベントリスナーの基本
・イベントリスナーで関数に引数を渡す
・イベントの削除

イベントリスナーの基本

HTML要素にイベントを追加するには以下のように書きます。

取得した要素.addEventListener('イベント名', 関数名, false);

以下は、イベントリスナーを使う例です。

function samplefunc(){
  console.log('Hello');
}
document.getElementById('target').addEventListener('click', samplefunc, false);

※第１引数：イベント名を渡します。クリック時（click）、ホバー時（mouseover）などがあります。
　イベント一覧

※第２引数：関数名を書きます。関数名()の「()」は不要です。

※第３引数：共にイベントのある親子要素のイベントの発火順の設定。基本falseでオッケーです！

イベントリスナーで関数に引数を渡す

イベントリスナーは少し癖があり、イベントリスナーの第２引数に、「引数有りの関数」を設定してもうまく動作しません。

イベントリスナーで関数に引数を渡すためには以下のようにします。

//関数の定義
function sample(val1){
    console.log('val1');
}

//イベントの追加
document.getElementById('target').addEventListener('click', function(){
    return sample('hello!!');
}, false);

このように、イベントリスナーの第２引数に無名関数を設定し、その戻り値として「引数有りの関数」を設定します。

イベントの削除

イベントリスナーで設定したイベントは削除することもできます。

以下のように書きます。

document.getElementById('target').removeEventListener('イベント名', 削除する関数名);

イベントが発生した要素を関数内で取得する方法

どのHTML要素でイベントが発生したのかによって処理を分ける場合があります。

イベントが発生したHTML要素の情報を取得するには「this」を使います。

例）

document.getElementsById('target1').addEventListener('click', function(){
  alert(this.innerHTML);
}, false);

　

イベントリスナーについては以上です。