JavaScript の複数の要素にイベント リスナーを効率的にアタッチするにはどうすればよいですか?

複数の要素にイベント リスナーを簡単に追加する

質問:

イベント リスナーを複数の要素に追加する効率的な方法はありますか

例:

伝統的に、イベント リスナーは個別に追加されます:

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

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

答え:

JavaScript では、要素の配列に対して forEach() メソッドを利用して、1 行のコードで各要素のイベント リスナーを作成できます。

解決策:

これを実現するには、要素を含む配列を作成します。

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

次に、forEach() メソッドを使用して配列を反復処理し、イベント リスナーを各要素に追加します:

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

このアプローチは、イベント リスナーを複数の要素に追加する簡潔かつ効率的な方法を提供し、イベント処理コードを合理化します。

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