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

2022年10月5日

環境
Google Chrome　 106.0.5249.91
Windows 10 Home 64bit

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

1.addEventListenerは、指定の要素(オブジェクト)にイベントリスナを登録します。
2.イベントリスナは、指定したイベントの種類の発生を監視し、指定のイベントが発生した場合、関数を実行します。
3.addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

構文

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

type
対象とするイベントの種類を表す文字列です。
listener
指定された種類のイベントが発生するときに通知 (Event インターフェースを実装しているオブジェクト) を受け取るオブジェクト。

使用例

<!DOCTYPE html>
<html>
<body>

<div id="cft" style="color: skyblue">文字をクリックして下さい</div>
<div id="show">oosaka</div>

<script>

  const cft = document.getElementById("cft");
   // addEventListenerメソッドで画面表示時にイベントリスナを登録
  cft.addEventListener("click",chkFun);

  // 登録される関数changeFunc
  function chkFun() {
    const show = document.getElementById("show");
    if(show.textContent == "tokyo") {
      show.textContent = "oosaka";
      } else {
       show.textContent = "tokyo";
      }
  }
 
</script>

</body>
</html>

実行結果
「文字をクリックして下さい」をクリックすると、「oosaka」から「tokyo」に変わります。
画面表示時にaddEventListenerメソッドで「文字をクリックして下さい」という文言にイベントリスナを登録していま

JavaScript

Posted by arkgame

関連記事: