JavaScript の 1 行で複数の要素にイベント リスナーを追加するにはどうすればよいですか?

1 行で複数の要素にイベント リスナーを追加する

複数の HTML 要素を操作する場合、それぞれにイベント リスナーを追加するのは面倒な場合があります。一つずつ個別に。幸いなことに、JavaScript を使用してこれを実現するより効率的な方法があります。

次のコード スニペットを考えてみましょう:

<p>Example 1:</p>
<pre class="brush:php;toolbar:false">element1.addEventListener("input", function() {
  // this function does stuff 
});

element1 &&& element2.addEventListener("input", function() {
  // this function does stuff
});

例 1 では単一の要素にイベント リスナーを追加しますが、例 2 では複数の要素にイベント リスナーを追加します。ただし、例 2 の構文は正しくありません。

解決策は、JavaScript の forEach() メソッドを使用することです。イベント リスナーを追加したい要素を含む配列があるとします。その場合、次のコードを使用できます。

let elementsArray = document.querySelectorAll("whatever");

elementsArray.forEach(function(elem) {
    elem.addEventListener("input", function() {
        // This function does stuff
    });
});

このコードでは、querySelectorAll("whatever") は、指定されたセレクターに一致する要素の配列を返します。次に、forEach() メソッドは配列内の各要素を反復処理し、目的のイベント リスナーを追加します。

このメソッドは、イベント リスナーを複数の要素に同時に追加するための簡潔で効率的な方法を提供します。配列と forEach() メソッドを利用することで、コードの冗長性を減らし、JavaScript プロジェクトの効率を向上させることができます。

以上がJavaScript の 1 行で複数の要素にイベント リスナーを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。