恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

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

投稿日:2018-03-28 更新日:

javascript

クリックやスクロールのイベントが起きた際に処理を行いたい時に使う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');
}

主なイベント一覧

引数 イベント発火のタイミング
click クリック時
mousedown マウスのボタンが押下された時
mouseup マウスのボタンを離した時
mouseover カーソルがターゲットに侵入した時
mousemove カーソルがターゲット内を動いている時
mouseout カーソルがターゲットの外に出た時
load ページの読み込みが完了した時
scroll スクロールされた時
resize ブラウザのウィンドウ等のサイズが変更された時

スマホ関連のイベント

引数 イベント発火のタイミング
touchstart タッチが開始された時
touchmove 指を画面上で動かす時
touchend 指を画面から離した時

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

関数に引数を渡す

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

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ですが、挙動にクセがありますね。とはいえ慣れればそこまで難しいものではないので、覚えておきましょう。

Related Entries

この記事を書いた人

TAC

TAC

Webデザイナー、フロントエンドエンジニア。 Webデザイン、HTML/CSS、JavaScript、PHP、SEOが専門です。