JavaScript addEventListener イベントリスナを登録

JavaScriptのaddEventListenerメソッドで、イベントリスナを登録するサンプルです。

目次

説明 addEventListenerメソッド
サンプル イベントリスナを登録する
  1つの要素にイベントリスナを2つ登録する
  イベントリスナの中のthisが指す対象

addEventListenerメソッド

要素(オブジェクト).addEventListener(イベントの種類, 関数[, オプション]);
  • 指定の要素(オブジェクト)にイベントリスナを登録します。
  • イベントリスナは、指定したイベントの種類の発生を監視し、指定のイベントが発生した場合、関数を実行します。
  • 以下はMDNのaddEventListenerメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

イベントリスナを登録する

画面表示時にaddEventListenerメソッドで「クリックして下さい」という文言にイベントリスナを設定しています。
下の「クリックして下さい」という文言をクリックまたはマウスを重ねると下の文言が変化します。

クリックして下さい

テストa

 

上記サンプルのコードです。

<p id="p1" style="color: red">クリックして下さい</p>
<p id="p2">テストa</p>
<script>
  function changeName1() {
    const p2 = document.getElementById("p2");
    if (p2.textContent === "OK") {
      p2.textContent = "テストa";
    } else {
      p2.textContent = "OK";
    }
  }
  const p1 = document.getElementById("p1");
  p1.addEventListener("click", changeName1);
  p1.addEventListener("mouseover", changeName1);
</script>

4~11行目は、関数です。
13,14行目は、addEventListenerメソッドです。
画面表示時にイベントリスナを登録をしています。
1つめの引数はclickとmouseoverのイベントです。
2つめの引数は、4行目の関数を指定しています。
指定の位置をクリックまたはマウスを重ねると関数が実行されます。

上記13行目は、以下のように書けます。
引数の関数名(changeName1)の代わりにロジックを直接書いています。

  p1.addEventListener("click", function () {
    const p2 = document.getElementById("p2");
    if (p2.textContent === "OK") {
      p2.textContent = "テストa";
    } else {
      p2.textContent = "OK";
    }
  });

 

1つの要素にイベントリスナを2つ登録する

1つの要素にaddEventListenerメソッドでイベントリスナを2つ登録します。
「クリックして下さい2」という文言をクリックすると下の文言が変化します。

クリックして下さい2

テストb

テストc

 

上記サンプルのコードです。

<p id="p3" style="color: red">クリックして下さい2</p>
<p id="p4">テストb</p>
<p id="p5">テストc</p>
<script>
  function changeName2() {
    const p4 = document.getElementById("p4");
    if (p4.textContent === "OK2") {
      p4.textContent = "テストb";
    } else {
      p4.textContent = "OK2";
    }
  }
  function changeName3() {
    const p5 = document.getElementById("p5");
    if (p5.textContent === "OK3") {
      p5.textContent = "テストc";
    } else {
      p5.textContent = "OK3";
    }
  }
  const p3 = document.getElementById("p3");
  p3.addEventListener("click", changeName2);
  p3.addEventListener("click", changeName3);
</script>

5,13行目は、関数です。
22,23行目は、addEventListenerメソッドです。
画面表示時にイベントリスナを登録をしています。
1つめの引数はclickイベントです。
2つめの引数は、5行目と13行目の関数を指定しています。
指定の位置をクリックすると2つの関数が実行されます。

 

イベントリスナの中のthisが指す対象

イベントリスナの中のthisが指す対象のサンプルです。

<p id="p1">テスト1</p>
<script>
  function changeName4() {
    console.log(this); //<p id="p1">テスト1</p>
  }
  const p1 = document.getElementById("p1");
  p1.addEventListener("click", changeName4);
</script>

4行目のthisは、1行目のイベントの発生元を指します。

関連の記事

JavaScript removeEventListenerイベントリスナ削除
JavaScript イベントのバブリングとキャンセル
JavaScript イベントを無効化する(preventDefault)
JavaScript イベントとイベントハンドラのサンプル

△上に戻る