JavaScriptのaddEventListenerの使い方、イベント一覧や引数について

クリックやスクロールのイベントが起きた際に処理を行いたい時に使うaddEventLitener。

その詳しい使い方を知っておくと非常に便利ですので、詳しく解説をします。

addEventListenerの使い方

getElementByIdなどで要素（ターゲット）を取得し、その要素にイベント発生時の処理を書きます。

<div id="js-target">click</div>

上記のようなHTMLのclickと書かれた要素がクリックされた時の処理を書いてみます。

let target = document.getElementById('js-target');

target.addEventListener('click', function() {
  // クリックされた時の処理を書く
  console.log('click');
});

定義された関数を実行するには、以下の様に書きます。

let target = document.getElementById('js-target');

target.addEventListener('click', eventFunc);

function eventFunc(){
  // クリックされた時の処理を書く
  console.log('click');
}

主なイベント一覧

スマホ関連のイベント

これは良く使うイベントで、他にも色々な発火タイミングが設定できます。

関数に引数を渡す

関数に引数を書くことで、色々な値を取得することができます。

let target = document.getElementById('js-target');

target.addEventListener('click', function(e) {
  console.log(e.target); // クリックされた要素
  console.log(e.clientX); // ブラウザ内の左上からのX座標
  console.log(e.clientY); // ブラウザ内の左上からのY座標
  console.log(e.pageX); // HTML全体の左上からのX座標
  console.log(e.pageY); // HTML全体の左上からのy座標
  console.log(e.offsetX); // クリックターゲットの要素左上からのX座標
  console.log(e.offsetY); // クリックターゲットの要素左上からのy座標
});

clientXとpageXは似ていますが、ページがスクロールされると基準となる左上の位置が異なります。

また、以下のような書き方もできます。

let target = document.getElementById('js-target');

target.addEventListener('click', eventFunc);

function eventFunc(e) {
  console.log(e.target); // クリックされた要素
  console.log(e.clientX); // ブラウザ内の左上からのX座標
  console.log(e.clientY); // ブラウザ内の左上からのY座標
  console.log(e.pageX); // HTML全体の左上からのX座標
  console.log(e.pageY); // HTML全体の左上からのy座標
  console.log(e.offsetX); // クリックターゲットの要素左上からのX座標
  console.log(e.offsetY); // クリックターゲットの要素左上からのy座標
}

定義された関数を使う時は、その関数に引数を渡します。

addEventListenerの部分で関数に引数がありませんが、定義された関数に引数が暗黙的に渡されます。

target.addEventListener('click', eventFunc(e)); // このような書き方はできない

このような書き方はできません。

イベント発生時処理の削除

設定されたイベント発火時の処理は、removeEventListenerで削除することができます。

target.removeEventListener('click',eventFunc);

まとめ

かなり頻繁に利用するaddEventListenerですが、挙動にクセがありますね。とはいえ慣れればそこまで難しいものではないので、覚えておきましょう。