Comment éviter le chevauchement des références de variables dans les gestionnaires d'événements JavaScript créés avec des boucles ?

Comment éviter le chevauchement des références de variables lors de la génération de gestionnaires d'événements avec des boucles en JavaScript

En JavaScript, lors de la création de gestionnaires d'événements avec des boucles, il est important pour résoudre le problème du référencement des variables. La question d'origine montre comment une boucle qui attribue des événements onclick à plusieurs éléments peut entraîner un comportement inattendu en raison de l'accès aux variables partagées.

Le problème survient lorsque tous les gestionnaires d'événements font référence à la même variable, qui est mise à jour à chaque itération de la boucle. De ce fait, seul le dernier gestionnaire d'événements conserve la valeur finale de la variable.

Pour résoudre ce problème, la solution consiste à définir une fonction distincte pour chaque gestionnaire d'événements, avec la variable comme paramètre. Cela garantit que chaque gestionnaire a sa propre copie de la variable, évitant ainsi le problème de référence qui se chevauche.

Voici le code corrigé :

// Define a function that takes the variable as a parameter
function handleElement(i) {
    document.getElementById("b" + i).onclick = function () {
        alert(i);  // Each handler has its own i
    };
}

// Iterate through the elements and call the function
for (i = 1; i < 11; i++) {
    handleElement(i);
}

En utilisant cette approche, chaque gestionnaire d'événements a son propre référence de variable dédiée, garantissant qu'elle se comporte comme prévu et alerte la valeur correcte en fonction de l'élément auquel elle correspond.

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!