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

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

目次	addEventListenerとは / addEventListenerの動くサンプル
	イベントリスナを登録する(関数を指定)
	イベントリスナを登録する(ロジックを指定)
	１つの要素にイベントリスナを２つ登録する
	初回クリック時のみに実行する{once:true}
	イベントリスナの中のthisが指す対象

addEventListenerとは

要素(オブジェクト).addEventListener(イベントの種類, 関数[, オプション]);

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

addEventListenerの動くサンプル

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

クリックして下さい

ABCDE

イベントリスナを登録する(関数を指定)

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

<p id="p1" style="color: red">クリックして下さい</p>
<p id="p2">ABCDE</p>
<script>
  const p1 = document.getElementById("p1");

  p1.addEventListener("click", changeName1);

  function changeName1() {
    const p2 = document.getElementById("p2");
    if (p2.textContent === "12345") {
      p2.textContent = "ABCDE";
    } else {
      p2.textContent = "12345";
    }
  }
</script>

6行目は、addEventListenerメソッドで画面表示時にイベントリスナを登録をしています。
指定の位置をクリック"click"すると7行目の関数「changeName1」が実行されます。

イベントリスナを登録する(ロジックを指定)

上記コードは、以下のように書けます。

<p id="p1" style="color: red">クリックして下さい</p>
<p id="p2">ABCDE</p>
<script>
  const p1 = document.getElementById("p1");

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

addEventListenerメソッドの2つめの引数は関数になっています。

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

クリックして下さい

123

456

画面表示時にイベントリスナを登録し指定の位置をクリックすると2つの関数が実行されます。

<p id="p3" style="color: red">クリックして下さい</p>
<p id="p4">123</p>
<p id="p5">456</p>
<script>
  const p3 = document.getElementById("p3");

  p3.addEventListener("click", changeName2);
  p3.addEventListener("click", changeName3);

  function changeName2() {
    const p4 = document.getElementById("p4");
    if (p4.textContent === "123") {
      p4.textContent = "ABC";
    } else {
      p4.textContent = "123";
    }
  }
  function changeName3() {
    const p5 = document.getElementById("p5");
    if (p5.textContent === "456") {
      p5.textContent = "DEF";
    } else {
      p5.textContent = "456";
    }
  }
</script>

初回クリック時のみに実行する{once:true}

{once: true}を指定すると１回のみ発動します。

<p id="p1" style="color: red">クリックして下さい</p>
<p id="p2">ABCDE</p>
<script>
  const p1 = document.getElementById("p1");

  p1.addEventListener("click",function () {
      const p2 = document.getElementById("p2");
      if (p2.textContent === "OK") {
        p2.textContent = "テストa";
      } else {
        p2.textContent = "OK";
      }
    },
    {once: true}
  );
</script>

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

<p id="p1">テスト１</p>
<script>
  const p1 = document.getElementById("p1");

  p1.addEventListener("click", changeName4);

  function changeName4() {
    console.log(this); //<p id="p1">テスト１</p>
  }
</script>

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