Pourquoi mes gestionnaires d'événements reçoivent-ils les valeurs de la dernière itération de boucle dans les éléments créés dynamiquement ?

Références de variables dans les gestionnaires d'événements et les fermetures

Dans ce scénario, vous créez dynamiquement des éléments avec des gestionnaires d'événements dans une boucle. Initialement, l'intention est de transmettre des valeurs distinctes au gestionnaire d'événements en fonction de l'itération de la boucle. Cependant, il semble que le gestionnaire d'événements reçoive les valeurs de la dernière itération de la boucle, ce qui suggère un problème de portée.

En effet, le problème du code réside dans l'utilisation de fonctions anonymes comme gestionnaires d'événements au sein de la boucle. Comme vous le soupçonnez à juste titre, les fonctions du gestionnaire d'événements sont des fermetures qui font référence aux variables dans la boucle. Au moment où l'événement se déclenche, la boucle est terminée et les variables référencées contiennent les valeurs finales attribuées lors de la dernière itération.

Mise en œuvre d'une fermeture

Pour résoudre ce problème problème et transmettre correctement les valeurs prévues au gestionnaire d'événements, vous devez implémenter une fermeture qui capture les variables au moment de l'exécution de la boucle. Ce faisant, chaque gestionnaire d'événements aura sa propre référence aux valeurs spécifiques dont il a besoin.

Le code révisé suivant intègre la fermeture en encapsulant la fonction du gestionnaire d'événements dans une autre fonction anonyme qui invoque immédiatement (également connue sous le nom de IIFE, ou expression de fonction immédiatement invoquée :

for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s, c, a)
    {
        return function()
        {
            onStatusChanged(s, c, a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}

Dans ce code modifié, l'IIFE interne renvoie la fonction de gestionnaire d'événements réelle tout en prenant en compte les paramètres nécessaires (select, callid, anotherid), qui sont transmis de la boucle. En capturant ces valeurs au moment de l'exécution de la boucle, vous créez effectivement une portée distincte pour chaque gestionnaire d'événement.

Cette technique garantit que chaque gestionnaire d'événement a sa propre référence aux valeurs dont il a besoin lorsque l'événement se produit, résolvant la question du référencement inapproprié des valeurs.

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!