Comment éviter les pièges de fermeture lors de la génération dynamique de gestionnaires d'événements en JavaScript ?

Comment générer dynamiquement des gestionnaires d'événements à l'aide de boucles en Javascript

Dans certains scénarios, il devient nécessaire d'attribuer des gestionnaires d'événements à une série d'éléments généré dynamiquement via Javascript, souvent appelé « boucle via les gestionnaires d'événements ». Ce problème survient lorsque les éléments générés ont des fonctionnalités similaires et nécessitent des gestionnaires d'événements avec un comportement unique, par opposition à l'utilisation de gestionnaires d'événements en ligne.

Prenons l'exemple où vous avez 10 balises générées à partir d’une réponse AJAX et vous souhaitez attribuer un événement onclick à chacune d’elles dans une boucle. Le code suivant semble être une solution simple :

for (i = 1; i < 11; i++) {
  document.getElementById("b" + i).onclick = function () {
    alert(i);
  };
}

Cependant, lors de l'exécution, ce code attribue uniquement l'événement onclick au dernier tag et affiche "11" dans la zone d'alerte pour tous les clics. La raison de ce comportement réside dans le fait que tous les gestionnaires d'événements partagent la même variable i, qui est incrémentée dans la boucle et pointe finalement vers la dernière variable tag.

Pour résoudre ce problème et garantir que chaque tag a son propre gestionnaire d'événements unique, vous devez définir une fonction distincte pour chaque gestionnaire et transmettre la valeur i en tant que paramètre. Ce faisant, chaque gestionnaire aura sa propre instance de la variable i, préservant ainsi la fonctionnalité prévue :

function handleElement(i) {
  document.getElementById("b" + i).onclick = function () {
    alert(i);
  };
}

for (i = 1; i < 11; i++) {
  handleElement(i);
}

Ce code révisé attribuera des gestionnaires d'événements onclick distincts à chaque et lorsqu'une balise est cliqué sur la balise, la valeur i correcte sera affichée dans la zone d'alerte, reflétant le comportement attendu. Cette technique vous permet de générer dynamiquement des gestionnaires d'événements pour une série d'éléments, garantissant ainsi une gestion appropriée des événements pour chaque élément individuel.

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!