Pourquoi les gestionnaires d'événements dans les boucles JavaScript ont-ils besoin de fermetures ?

Gestionnaires d'événements dans des boucles JavaScript : le besoin de fermetures

En JavaScript, lorsque vous travaillez avec des gestionnaires d'événements dans des boucles, il peut être nécessaire de implémentez des fermetures pour garantir le passage correct des paramètres. Considérez le code suivant :

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

Dans ce scénario, lorsque l'événement onchange se déclenche, les valeurs transmises à onStatusChanged() sont cohérentes dans tous les fichiers éléments, malgré le fait que callid et anotherid doivent avoir des valeurs distinctes pour chaque itération de la boucle.

Cela se produit parce que les gestionnaires d'événements JavaScript créent des fermetures et que les références à callid et anotherid dans la fonction font référence à la valeur finale une fois la boucle terminée. Pour résoudre ce problème, une fermeture est nécessaire pour capturer les valeurs actuelles des paramètres lors de chaque itération.

Implémentation de fermetures pour le passage des paramètres

Pour copier les valeurs du paramètres à chaque itération, implémentez une fermeture comme suit :

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

Dans ce code mis à jour :

• Une fermeture est créée à l'aide de la fonction auto-exécutable return function() { }
• La fonction de gestionnaire d'événements accepte trois arguments comme paramètres : s (l'élément

), c (l'identifiant actuel) et a (l'autre identifiant actuel)

La fermeture appelle immédiatement la fonction, transmettant les valeurs actuelles de s, c et a

Lorsque l'événement onchange se déclenche, les fermetures s'exécutent, garantissant que onStatusChanged() reçoit les valeurs correctes pour chaque itération de l'élément.

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!

JavaScript for select using Event copy function this issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je modifier le contenu d’un div avec jQuery ?Article suivant：Comment puis-je modifier le contenu d’un div avec jQuery ?

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved