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

複数の要素へのイベント リスナーの同時アタッチ:

Web 開発では、イベント リスナーを DOM 要素にアタッチすることは、対話性にとって非常に重要です。複数の要素を扱う場合、リスナーを個別に追加するのは面倒な場合があります。この記事では、同じイベント リスナーを 1 行で複数の要素に割り当てる方法について説明します。

次の例を考えてみましょう。

<code class="javascript">element1.addEventListener("input", function() {
  // this function does stuff 
});

element2 &amp;&amp; element2.addEventListener("input", function() {
  // this function does stuff
});</code>

このアプローチは機能しますが、別々に記述する必要があります。各要素の行。より効率的な解決策は、要素配列を使用することです。方法は次のとおりです。

<code class="javascript">let elementsArray = document.querySelectorAll("whatever");

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

要素を配列に配置することで、各要素をループし、1 行ですべての要素にイベント リスナーを追加できます。この手法は、イベント リスナーの添付コードを簡略化するための簡潔で便利な方法を提供します。

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