Maison > interface Web > js tutoriel > le corps du texte

Comment simplifier l'attribution des écouteurs d'événements pour plusieurs éléments ?

Mary-Kate Olsen
Libérer: 2024-10-30 17:43:31
original
653 Les gens l'ont consulté

How to Simplify Event Listener Assignment for Multiple Elements?

Simplification de l'affectation des écouteurs d'événements pour plusieurs éléments

Vous pouvez rencontrer une situation dans laquelle vous devez ajouter des écouteurs d'événements à plusieurs éléments. Bien qu'il soit possible d'attribuer des auditeurs individuellement comme indiqué :

element1.addEventListener("input", function() {
  // This function does stuff
});
Copier après la connexion

ou en enchaînant des instructions conditionnelles :

element1 && element2.addEventListener("input", function() {
  // This function does stuff
});
Copier après la connexion

ces méthodes peuvent devenir fastidieuses lorsqu'il s'agit de traiter de nombreux éléments. Une approche plus efficace consiste à utiliser la méthode forEach() sur un tableau d'éléments :

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

elementsArray.forEach(function(elem) {
    elem.addEventListener("input", function() {
        // This function does stuff
    });
});
Copier après la connexion

En parcourant le tableau, ce code attribue l'écouteur d'événement à chaque élément sur une seule ligne, simplifiant ainsi votre code et rationaliser le processus de gestion des événements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!