複数の要素へのイベント リスナーの割り当てを簡素化する方法

複数の要素へのイベント リスナーの割り当ての簡素化

複数の要素にイベント リスナーを追加する必要がある状況が発生する場合があります。

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

のようにリスナーを個別に割り当てることも、

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

のように条件ステートメントを連鎖させることによってリスナーを割り当てることもできますが、多くの要素を扱う場合、これらのメソッドは面倒になる可能性があります。より効率的なアプローチは、要素の配列で forEach() メソッドを利用することです。

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

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

配列を反復処理することにより、このコードは 1 行で各要素にイベント リスナーを割り当て、コードを作成し、イベント処理プロセスを合理化します。

以上が複数の要素へのイベント リスナーの割り当てを簡素化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。