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

【JavaScript入門】addEventListener()で要素にイベントハンドラを追加する方法

addEventListener()メソッドとは

JavaScriptでは、addEventListener()メソッドを使うことで、指定した要素にイベントハンドラ（イベントリスナー）を登録できます。このメソッドの最大の特徴は、すでに設定されているイベントハンドラを上書きせずに新しいハンドラを追加できる点です。そのため、1つの要素に対して複数のイベントハンドラを同時に登録することも可能です。

さらに、addEventListener()を利用すると、バブリング（イベントの伝播）への反応の仕方を柔軟に制御できます。mouseoverやclickをはじめ、さまざまな種類のイベントを扱えるのも魅力です。

基本構文

element.addEventListener(event, function, useCapture);
  • event：登録するイベント名（click、mouseover など）
  • function：イベント発生時に実行される関数
  • useCapture：省略可能。キャプチャリングフェーズで処理するかどうかの真偽値（デフォルトはfalse）

サンプルコード

次の例では、ボタン要素にmouseoverイベントを割り当てています。「listener」ボタン上にマウスカーソルを乗せると、指定したテキストが画面に表示されます。

<html>
<body>
<p>この例では、addEventListener()メソッドを使って
ボタンにmouseoverイベントを登録しています。</p>
<input type="button" id="myBtn" value="listener">
<p id="listener"></p>
<script>
document.getElementById("myBtn").addEventListener("mouseover", displayText);
function displayText() {
  document.getElementById("listener").innerHTML =
    "Tutorixは最高のeラーニングプラットフォームです";
}
</script>
</body>
</html>

実行結果

上記のコードを実行すると、最初に次のような画面が表示されます。

【JavaScript入門】addEventListener()で要素にイベントハンドラを追加する方法

ここで「listener」ボタンにマウスを乗せると、mouseoverイベントが発火し、以下のようにテキストが出力されます。

出力

【JavaScript入門】addEventListener()で要素にイベントハンドラを追加する方法

補足：イベントハンドラを削除したい場合

登録済みのイベントハンドラを取り外す場合は、removeEventListener()メソッドを使用します。引数には、登録時と同じイベント名と関数を指定します。

element.removeEventListener("mouseover", displayText);

なお、無名関数（匿名関数）で登録したハンドラは後から削除できないため、削除が必要になる可能性がある場合は、名前付き関数として定義しておくことをおすすめします。

  1. JavaScriptでクリックした要素にアクティブクラスを追加する方法

    Webページのボタンやタブメニューなどでは、現在選択されている要素を視覚的に強調表示したいケースがよくあります。JavaScriptを使えば、クリックされた要素に「active」クラスを動的に追加し、それまでアクティブだった要素からクラスを外すことで、この処理を簡単に実装できます。実装のポイント基本的な流れは以下のとおりです。querySelectorAll() ですべてのボタン要素を取得する各ボタンに addEventListener() でクリックイベントを登録するクリック時に、既存の「active」クラスを持つ要素からクラスを削除するクリックされた要素に「active」クラスを追加するサ

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値