Comment ajouter des écouteurs d'événements à plusieurs éléments dans une seule ligne de JavaScript ?

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

Lorsque vous travaillez avec plusieurs éléments HTML, il peut être fastidieux d'ajouter des écouteurs d'événements à chacun un individuellement. Heureusement, il existe un moyen plus efficace d'y parvenir en utilisant JavaScript.

Considérez l'extrait de code suivant :

<p>Example 1:</p>
<pre class="brush:php;toolbar:false">element1.addEventListener("input", function() {
  // this function does stuff 
});

Example 2:

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

Alors que l'exemple 1 ajoute un écouteur d'événement à un seul élément, l'exemple 2 tente de ajoutez un écouteur d'événement à plusieurs éléments. Cependant, la syntaxe de l'exemple 2 est incorrecte.

La solution réside dans l'utilisation de la méthode forEach() de JavaScript. Supposons que vous disposiez d'un tableau contenant les éléments auxquels vous souhaitez ajouter des écouteurs d'événements. Dans ce cas, vous pouvez utiliser le code suivant :

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

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

Dans ce code, querySelectorAll("whatever") renvoie un tableau d'éléments qui correspondent au sélecteur spécifié. La méthode forEach() parcourt ensuite chaque élément du tableau et ajoute l'écouteur d'événement souhaité.

Cette méthode fournit un moyen concis et efficace d'ajouter des écouteurs d'événement à plusieurs éléments simultanément. En utilisant des tableaux et la méthode forEach(), vous pouvez réduire la redondance du code et améliorer l'efficacité de vos projets JavaScript.

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!