Maison > interface Web > js tutoriel > Comment puis-je ajouter des écouteurs d'événements à plusieurs éléments dans une seule ligne de code ?

Comment puis-je ajouter des écouteurs d'événements à plusieurs éléments dans une seule ligne de code ?

Susan Sarandon
Libérer: 2024-10-26 08:29:03
original
966 Les gens l'ont consulté

How can I add event listeners to multiple elements in a single line of code?

Ajout d'écouteurs d'événements à plusieurs éléments sur une seule ligne

Lorsque vous travaillez avec plusieurs éléments, il peut être fastidieux d'ajouter des écouteurs d'événements à chacun un individuellement. Heureusement, il existe un moyen de rationaliser ce processus et d'ajouter des écouteurs d'événements à plusieurs éléments dans une seule ligne de code.

Utiliser une boucle

Une méthode efficace consiste à utilisez une boucle pour parcourir un tableau d'éléments et ajoutez l'écouteur d'événement à chacun. Par exemple :

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

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

Ce code sélectionne tous les éléments correspondant au sélecteur spécifié et ajoute un écouteur d'événement à chacun pour l'événement "input".

Préoccupations grammaticales

Vous avez peut-être remarqué le problème grammatical dans votre deuxième exemple :

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

Cette syntaxe est grammaticalement incorrecte. La façon correcte d'écrire ceci serait :

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

Cependant, cette méthode n'est toujours pas efficace car elle ajoute un écouteur d'événement à chaque élément séparément. L'approche en boucle décrite ci-dessus est une solution plus optimisée.

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!

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