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

Mary-Kate Olsen
リリース: 2024-10-30 17:43:31
オリジナル
654 人が閲覧しました

How to Simplify Event Listener Assignment for Multiple Elements?

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

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

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!