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

JavaScriptで同じ要素に複数のイベントハンドラーを追加する方法を解説

JavaScriptのHTML DOMでは、addEventListener()メソッドを使うことで、同じ要素に複数のイベントハンドラーを簡単に追加できます。

ポイントは、イベントハンドラーごとにaddEventListener()を1回ずつ呼び出すことです。例えば、「クリック」イベントと「ダブルクリック」イベントを同じボタンに登録したい場合は、それぞれに対して個別にaddEventListener()を実行します。

この方法には、onloadやonclickなどの従来のプロパティと異なり、既存のイベントハンドラーを上書きせずに新しいハンドラーを追加できるという大きなメリットがあります。

サンプルコード

以下のコードでは、同じボタンに対して2種類のイベントハンドラーを登録しています。ボタンを1回クリックすると現在の日時が表示され、2回続けてクリック（ダブルクリック）するとアラートが表示されます。

<!DOCTYPE html>
<html>
   <body>
      <p>下のボタンを1回クリックすると日付が表示されます。</p>
      <p>下のボタンを2回クリックするとアラートが表示されます。</p>
      <button id="btnid"> クリックしてください </button>
      <p id="pid"></p>

      <script>
         document.getElementById("btnid").addEventListener("click", displayEvent);
         var res = document.getElementById("btnid");
         res.addEventListener("dblclick", myFunction);
         function displayEvent() {
            document.getElementById("pid").innerHTML = Date();
         }
         function myFunction() {
            alert ("ボタンが2回クリックされました！");
         }
      </script>
   </body>
</html>

コードの解説

  • 1つ目のaddEventListener()：ボタンに対して「click」イベントを登録し、クリックされるたびにdisplayEvent関数が実行されて現在の日時を表示します。
  • 2つ目のaddEventListener()：同じボタンに対して「dblclick」（ダブルクリック）イベントを登録し、myFunction関数によってアラートを表示します。

このように、addEventListener()を繰り返し使うことで、1つの要素に対して自由に複数のイベント処理を組み合わせることができます。

  1. JavaScriptで要素にクラス名を追加する方法をわかりやすく解説

    JavaScriptを使ってHTML要素にクラス名を追加するには、classList.add()メソッドを使用するのが最も簡単で推奨される方法です。この記事では、ボタンをクリックしたときにdiv要素へ新しいスタイル（クラス）を動的に適用する具体例を、コードと実行結果つきで解説します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <sty

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

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