HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのaddEventListener()メソッドとは？構文と使い方をサンプル付きで解説

addEventListener()メソッドとは

HTML DOM の addEventListener() メソッドは、指定した要素にイベントハンドラを登録するために使用します。クリックやマウスオーバーなど、ユーザーの操作に応じた処理を要素に紐づけることができ、JavaScript による動的なWebページ制作には欠かせない基本メソッドです。

構文

addEventListener() メソッドの基本的な書式は以下の通りです。

element.addEventListener(event, function, capture)

パラメータの説明

  • event： 登録するイベントの名前（例：click、mouseover など）。必須項目です。
  • function： イベントが発生したときに実行される関数。必須項目です。
  • capture： イベントをキャプチャリングフェーズで処理するかどうかを指定します。true または false の真偽値で指定します。

1つの要素に対して複数のイベントハンドラを登録できるのも、このメソッドの大きな特徴です。後述のサンプルでは、同じボタンに「mouseover」と「click」という2種類のイベントを登録しています。

サンプルコード

それでは、DOM の addEventListener() メソッドを実装した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<button id="btn">Click</button>
<p id="myid"></p>
<script>
   var x = document.getElementById("btn");
   x.addEventListener("mouseover", one);
   x.addEventListener("click", two);
   function one() {
      document.getElementById("myid").innerHTML += "Button hovered! "
   }
   function two() {
      document.getElementById("myid").innerHTML += "!!Button Clicked!! "
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、まず次のような画面が表示されます。

HTML DOMのaddEventListener()メソッドとは？構文と使い方をサンプル付きで解説

ボタンをクリックすると、「!!Button Clicked!!」というメッセージが表示されます。また、ボタン上にマウスカーソルを乗せる（マウスオーバー）と、「Button hovered!」というテキストが表示されます。

HTML DOMのaddEventListener()メソッドとは？構文と使い方をサンプル付きで解説

まとめ

addEventListener() メソッドを使えば、HTML要素に対して柔軟にイベント処理を追加できます。なお、登録したイベントハンドラを削除したい場合は、対応する removeEventListener() メソッドを使用します。イベント駆動型のJavaScriptプログラミングにおいて、これらのメソッドはセットで覚えておくと便利です。

  1. HTML DOM の storage イベントとは?基本構文とサンプルコードを解説

    HTML DOM の storage イベントは、ウィンドウのストレージ領域(localStorage や sessionStorage)に変更が加えられたときに発生します。このイベントには重要な特徴があり、同じウィンドウ内での変更では発火せず、別のウィンドウやタブがそのストレージ領域を変更した場合にのみトリガーされるという点です。これにより、複数のタブ間でデータの同期を取る処理などに活用できます。 storage イベントの主なプロパティ イベントオブジェクトからは、以下のような情報を取得できます。 event.key: 変更されたキーの名前 event.oldValue: 変更前の値 e

  2. HTML DOM stopPropagation()メソッドとは？イベント伝播の停止方法を実例付きで解説

    HTML DOMのstopPropagation()イベントメソッドは、指定された要素におけるイベントの伝播（プロパゲーション）を停止するために使用されるメソッドです。これにより、子要素上で発生したクリックイベントが親要素へ伝わるのを防ぐことができます。なお、イベントの伝播は「イベントバブリング」とも呼ばれています。stopPropagation()メソッドの基本通常、DOM内の要素でイベントが発生すると、そのイベントは親要素へと順番に伝わっていきます。例えば、div要素の中にあるimg要素をクリックした場合、img要素のクリックイベントが発火した後、同じイベントがdiv要素にも伝播します。s