Comment attacher efficacement des écouteurs d'événements à plusieurs éléments en JavaScript ?

Ajouter des écouteurs d'événements à plusieurs éléments sans effort

Question :

Existe-t-il un moyen efficace d'attacher des écouteurs d'événements à plusieurs éléments simultanément, évitant ainsi la nécessité d'une gestion séparée des événements pour chaque élément ?

Exemple :

Traditionnellement, les écouteurs d'événements sont ajoutés individuellement :

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

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

Réponse :

En JavaScript, vous pouvez utiliser la méthode forEach() sur un tableau d'éléments pour créer des écouteurs d'événements pour chaque élément dans une seule ligne de code.

Solution :

Pour y parvenir, créez un tableau qui contient vos éléments :

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

Ensuite, utilisez la méthode forEach() pour parcourir le tableau et ajoutez un écouteur d'événement à chaque élément :

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

Cette approche fournit un moyen concis et efficace d'ajouter des écouteurs d'événement à plusieurs éléments, rationalisant ainsi votre code 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!