Pourquoi les écouteurs d'événements dans les boucles JavaScript ciblent-ils toujours le dernier élément ?

Comprendre le comportement des écouteurs d'événements dans les boucles

En JavaScript, les écouteurs d'événements permettent aux éléments de répondre aux actions de l'utilisateur. L'utilisation de boucles pour ajouter des écouteurs d'événements à plusieurs objets peut soulever des inquiétudes quant à la fonctionnalité des écouteurs.

Le problème avec l'approche traditionnelle

Considérez la situation suivante : vous essayez d'ajouter cliquez sur les écouteurs d'événements sur plusieurs éléments dans une classe "conteneur". Cependant, lorsque vous utilisez une boucle for traditionnelle, vous remarquez que tous les auditeurs finissent par cibler le dernier élément de la boucle.

La raison : fermetures

Ce comportement se produit en raison de fermetures en JavaScript. Lorsque vous affectez des variables dans la boucle, elles font référence au même emplacement mémoire. Ainsi, lorsque vous tentez d'accéder à ces variables dans les fonctions d'écoute d'événements, elles font toujours référence aux valeurs de la dernière itération.

La solution : invocation immédiate

Pour résoudre ce problème problème, utilisez l’invocation immédiate dans la boucle. Ce faisant, vous créez un nouveau contexte d'exécution pour chaque itération, garantissant que les variables de ce contexte restent locales et indépendantes des variables de boucle.

Code fixe :

Le code corrigé ci-dessous utilise l'invocation immédiate pour obtenir le comportement souhaité :

// 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
}

Dans ce code corrigé, l'invocation immédiate crée un nouveau contexte d'exécution pour chaque itération, permettant aux variables boxa et boxb de se maintenir leurs valeurs appropriées dans les fonctions d'écoute d'é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!