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

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

説明	addEventListenerメソッド
サンプル	イベントリスナを登録する
	１つの要素にイベントリスナを２つ登録する
	イベントリスナの中の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";
    }
  });

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

１つの要素にaddEventListenerメソッドでイベントリスナを２つ登録します。
「クリックして下さい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">テスト１</p>
<script>
  function changeName4() {
    console.log(this); //<p id="p1">テスト１</p>
  }
  const p1 = document.getElementById("p1");
  p1.addEventListener("click", changeName4);
</script>

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