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

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

複数の要素を操作する場合、それぞれの要素にイベント リスナーを追加するのは面倒な場合があります。一つずつ個別に。ありがたいことに、このプロセスを合理化し、1 行のコードでイベント リスナーを複数の要素に追加する方法があります。

ループの使用

効果的な方法の 1 つは次のとおりです。ループを使用して要素の配列を反復処理し、それぞれにイベント リスナーを追加します。例:

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

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

このコードは、指定されたセレクターに一致するすべての要素を選択し、「input」イベントの各要素にイベント リスナーを追加します。

文法上の懸念

2 番目の例の文法上の問題に気づいたかもしれません:

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

この構文は文法的に間違っています。これを記述する正しい方法は次のようになります:

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

ただし、このメソッドは各要素にイベント リスナーを個別に追加するため、依然として効率的ではありません。上記で概説したループ アプローチは、より最適化されたソリューションです。

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