Comment éviter les problèmes de fermeture lors de l'utilisation d'écouteurs d'événements en boucle ?

Éviter les problèmes de fermeture lors de l'utilisation d'écouteurs d'événements dans une boucle

Dans votre tentative d'attacher des écouteurs d'événements à plusieurs éléments à l'aide d'une boucle for, vous J'ai rencontré le problème où tous les écouteurs finissent par cibler le dernier objet. Cela est dû à la façon dont les fermetures fonctionnent en JavaScript.

Comprendre la fermeture

Lorsqu'une fonction fait référence à une variable déclarée en dehors de sa portée, elle conserve l'accès à cette variable même après la sortie de la fonction. Dans votre cas, les fonctions d'écoute d'événements définies dans la boucle font référence à boxa et boxb, qui sont définies en dehors de la boucle. Lorsque la boucle est terminée, ces variables pointent vers les derniers éléments de la boucle.

Résoudre le problème

Pour éviter ce problème de fermeture, vous pouvez utiliser une fonction immédiatement invoquée expression (IIFE) à l’intérieur de la boucle. Un IIFE crée une nouvelle portée, de sorte que les variables déclarées à l'intérieur ne sont pas accessibles en dehors de la fonction.

Code révisé

Voici le code révisé avec les IIFE en place :

// Function to run on click:
function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";
}

// 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);
  }()); // immediate invocation
}

En utilisant les IIFE, vous vous assurez que chaque fonction d'écoute d'événement a sa propre portée, évitant ainsi le problème de fermeture. Désormais, chaque écouteur d'événement ciblera correctement l'élément correspondant dans la boucle.

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!