Pourquoi les gestionnaires d'événements dans les boucles JavaScript font-ils référence aux mêmes variables ?

Travailler avec des gestionnaires d'événements dans des boucles JavaScript : utiliser des fermetures pour la gestion d'événements distincts

En JavaScript, lorsque vous travaillez avec du code HTML, les gestionnaires d'événements jouent un rôle crucial pour permettre les interactions des utilisateurs avec la page Web. Cependant, un défi courant survient lorsque ces gestionnaires d'événements sont définis dans une boucle, conduisant à un comportement inattendu.

Pour illustrer ce problème, considérons l'extrait de code suivant :

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function() {
        onStatusChanged(select, callid, anotherid);
    };
    td.appendChild(select);
}

Lors d'un changement est déclenché pour un événement , des preuves empiriques suggèrent que les mêmes valeurs sont transmises à la méthode onStatusChanged(), quelle que soit la méthode élément qui a déclenché l’événement. Ce comportement découle de la façon dont JavaScript implémente les fermetures lors de la définition des gestionnaires d'événements.

Plus précisément, au sein de la boucle, la fermeture select.onchange = function() fait référence aux variables callid et anotherid, qui portent les valeurs attribuées lors de la dernière itération de la boucle. Par conséquent, lorsqu'un événement est déclenché, les valeurs de ces variables ne sont pas celles associées à l'attribut élément mais plutôt les derniers définis lors de l'exécution de la boucle.

Pour résoudre ce problème, une fermeture peut être implémentée pour capturer les valeurs de select, callid et anotherid au moment de la définition du gestionnaire d'événements. Le code suivant illustre cette approche :

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
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);
}</code>

En résumé, l'utilisation de fermetures lors de la définition des gestionnaires d'événements dans les boucles JavaScript est essentielle pour garantir que les fonctions du gestionnaire d'événements reçoivent les valeurs appropriées des variables impliquées. Cette pratique permet une gestion distincte des événements en fonction du paramètre

élément qui déclenche l'événement.

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!