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

JavaScriptのHTML DOMでaddEventListener()メソッドを使う方法をわかりやすく解説

addEventListener()メソッドとは？

addEventListener()メソッドを使用すると、指定したHTML要素にイベントハンドラ（イベント発生時に実行される関数）を追加できます。クリックやダブルクリック、キー入力など、さまざまなイベントに対する処理を柔軟に登録できるのが特徴です。

基本的な構文は以下のとおりです。

要素.addEventListener(イベント名, 実行する関数);

同じ要素・同じイベントに対して複数のハンドラを登録できる点が、onclick属性などの従来の書き方との大きな違いです。

サンプルコード

次のコードを実行して、ボタンをダブルクリックしてみてください。ダブルクリック（dblclick）イベントが発生すると、現在の日時が画面に表示されます。

<!DOCTYPE html>
<html>
  <body>
    <p>下のボタンをダブルクリックしてください。</p>
    <button id="btnid">ダブルクリック</button>
    <p id="pid"></p>
    <script>
      document.getElementById("btnid").addEventListener("dblclick", displayEvent);
      function displayEvent() {
        document.getElementById("pid").innerHTML = Date();
      }
  </script>
 </body>
</html>

コードの解説

このサンプルでは、getElementById("btnid")で取得したボタン要素に対して、addEventListener()メソッドで「dblclick」イベントを登録しています。

ボタンがダブルクリックされると、第2引数に指定したdisplayEvent関数が呼び出され、Date()で取得した現在の日時が<p id="pid">要素のinnerHTMLとして挿入され、画面上に表示されます。

このように、addEventListener()メソッドを使えば、HTMLとJavaScriptの処理を分離しながら、直感的にイベント処理を実装できます。

  1. JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

    HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト

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

    addEventListener()メソッドとはHTML DOM の addEventListener() メソッドは、指定した要素にイベントハンドラを登録するために使用します。クリックやマウスオーバーなど、ユーザーの操作に応じた処理を要素に紐づけることができ、JavaScript による動的なWebページ制作には欠かせない基本メソッドです。構文addEventListener() メソッドの基本的な書式は以下の通りです。element.addEventListener(event, function, capture)パラメータの説明event： 登録するイベントの名前（例：click、mo