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

JavaScriptでHTML DOM要素にイベントハンドラーを追加する方法

HTML DOMの要素にイベントハンドラーを追加するには、JavaScriptの addEventListener() メソッドを使用します。このメソッドを使うと、クリックやマウスオーバーなど、さまざまなイベントに対して処理を登録できます。

addEventListener()の基本構文

element.addEventListener(event, function, useCapture);
  • event： クリックなどのイベント名（"click" のように引用符で指定）
  • function： イベント発生時に実行される関数
  • useCapture： イベント伝播の方式を指定する省略可能な真偽値（省略可）

サンプルコード

以下のコードでは、ボタンをクリックすると現在の日時が表示されます。

<!DOCTYPE html>
<html>
   <body>
      <p>下のボタンをクリックしてください。</p>
      <button id = "btnid">クリック</button>

      <p id = "pid"></p>

      <script>
         document.getElementById("btnid").addEventListener("click", displayEvent);

         function displayEvent() {
            document.getElementById("pid").innerHTML = Date();
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、まず document.getElementById() でIDが「btnid」のボタン要素を取得し、addEventListener("click", displayEvent) によってクリックイベントに関数を登録しています。

ボタンがクリックされると displayEvent() 関数が実行され、Date() で取得した現在の日時が、IDが「pid」の段落要素内に表示されます。

なお、addEventListener() は1つの要素に複数のイベントハンドラーを追加できるため、既存の処理を上書きせずに拡張できる点がメリットです。

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

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

  2. HTML DOM DragEvent(ドラッグイベント)の使い方を徹底解説

    HTML DOM DragEventとはHTML DOM DragEvent(ドラッグイベント)は、選択されたテキストや要素がドラッグ&ドロップされる際に実行されるイベントの一種です。このイベントはHTML5で新たに導入され、直感的なドラッグ&ドロップ操作を実装するために広く利用されています。プロパティHTML DOM DragEventには、以下のプロパティが用意されています。プロパティ説明dataTransferユーザーがドラッグまたはドロップしているデータを返します。構文DragEventの基本的な構文は以下のとおりです。Object.DragEventType= function_na