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

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

サンプル	イベントリスナを登録する
	１つの要素にイベントリスナを２つ登録する
	イベントリスナの中のthisが指す対象

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

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

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

5行目は、addEventListenerメソッドです。
画面表示時にイベントリスナを登録をしています。
1つめの引数は"click"のイベントです。
2つめの引数は、7行目の関数を指定しています。

指定の位置をクリック"click"すると関数「changeName1」が実行されます。

引数の関数名(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>

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

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

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

クリックして下さい

123

456

上記サンプルのコードです。1行目のP要素に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>

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

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

イベントリスナの中の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>

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