Comment attribuer des écouteurs d'événements à plusieurs objets sans conflits de portée ?

Affectation d'écouteurs d'événements à l'aide de fonctions itératives

Lors de l'utilisation d'une boucle pour ajouter des écouteurs d'événements à plusieurs objets, il peut sembler que tous les écouteurs font référence au même objet, généralement le dernier de la boucle. Cela est dû à la façon dont JavaScript gère la portée des variables et les fermetures de fonctions.

Pour résoudre ce problème, utilisez l'approche suivante :

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
  (function () {
    var k = i + 1;
    var boxa = elem[i].parentNode.id;
    var boxb = elem[k].parentNode.id;

    elem[i].addEventListener("click", function() { makeItHappen(boxa, boxb); }, false);
    elem[k].addEventListener("click", function() { makeItHappen(boxb, boxa); }, false);
  }());
}

Dans ce code, une fonction anonyme est enroulée autour du portée, créant une fermeture pour chaque itération. En exécutant la fonction immédiatement avec l'opérateur '()', chaque itération a sa propre portée privée, garantissant que les variables et les fonctions qu'elle contient n'interfèrent pas avec celles des autres itérations.

Cette approche accorde à chaque écouteur d'événement accès à ses variables prévues, résolvant le problème de tous les écouteurs ciblant le même objet.

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!