Comment attacher des écouteurs d'événements à plusieurs éléments sur une seule ligne ?

Attachement simultané d'écouteurs d'événements à plusieurs éléments :

Dans le développement Web, l'attachement d'écouteurs d'événements aux éléments DOM est crucial pour l'interactivité. Lorsqu’il s’agit de plusieurs éléments, il peut s’avérer fastidieux d’ajouter des auditeurs individuellement. Cet article aborde la question de savoir comment attribuer le même écouteur d'événement à plusieurs éléments sur une seule ligne.

Considérez l'exemple suivant :

<code class="javascript">element1.addEventListener("input", function() {
  // this function does stuff 
});

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

Bien que cette approche fonctionne, elle nécessite d'écrire des lignes pour chaque élément. Une solution plus efficace consiste à utiliser des tableaux d’éléments. Voici comment :

<code class="javascript">let elementsArray = document.querySelectorAll("whatever");

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

En plaçant les éléments dans un tableau, vous pouvez parcourir chaque élément et ajouter l'écouteur d'événement à chacun d'eux sur une seule ligne. Cette technique fournit un moyen concis et pratique de simplifier le code de pièce jointe de votre écouteur d'événement.

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!