recherche

Maison >interface Web >js tutoriel >Analyser les problèmes d'inscription aux événements causés par les compétences js close_javascript

Analyser les problèmes d'inscription aux événements causés par les compétences js close_javascript

WBOY
WBOYoriginal
2016-05-16 15:07:521279parcourir

Contexte : J'ai lu quelques articles sur la chaîne de portée et la fermeture js pendant mon temps libre, et j'ai accidentellement vu un problème que j'ai rencontré auparavant, qui consiste à enregistrer le pilote d'événement pour le nœud dom dans la boucle for, voir le code ci-dessous pour plus de détails : 

<!DOCTYPE html>
<html>
 <head>
 <title>js闭包</title>
 <meta charset="utf-8" />
 </head>
 <body>
 <button id="anchor1">1</button>
 <button id="anchor2">2</button>
 <button id="anchor3">3</button>
 <script type="text/javascript" src="jquery-1.12.1.js"></script>
 <script type="text/javascript">
  function pageLoad(){
  for (var i = 1; i <=3; i++) { 
   var anchor = document.getElementById("anchor" + i);
   anchor.onclick = function () {
   console.log("anchor"+i);
   } 
  } 
  } 
  window.onload = pageLoad; 
 </script>
 </body>
</html>

Selon une pensée normale, le résultat devrait être que cliquer sur 3 boutons affichera respectivement "anchor1", "anchor2" et "anchor3". Je le pensais au début de la période, mais le résultat est que peu importe lequel. est cliqué, "anchor4" sera invité.

Pourquoi ça ? Ne vous inquiétez pas, analysons-le lentement. Il inclut la connaissance de la chaîne de portée et de la fermeture js, je ne le présenterai donc pas en détail ici.

Regardons d'abord Anchor.onclick, qu'est-ce que c'est ? Il s'agit d'un gestionnaire d'événements DOM de niveau 0. Je sais aussi. Le blogueur est-il un psychopathe ? *************** Arrêtez de discuter. Ce que je veux dire, c'est cette ancre.onclick<.>

est une déclaration d'un gestionnaire d'événements, tout comme var name="Xiao Ming". Ceci est déclaré, mais il n'a pas encore été exécuté. Voici la clé. Modifions le code js ci-dessus et jetons un œil : 

function pageLoad(){
  for (var i = 1; i <=3; i++) { 
  var anchor = document.getElementById("anchor" + i);
   anchor.onclick = function () {
   console.log("anchor"+i);
   } 
   if(i==2){
   debugger;//我们在这里debugger一下，然后在控制台手动触发#anchor1和#anchor2的点击事件
   }
  } 
 } 
 window.onload = pageLoad;

Vous voyez, nous utilisons le débogueur pour arrêter la boucle lorsque i==2, puis allons à la console pour déclencher manuellement les événements de clic de #anchor1 et #anchor2, et la console imprime "anchor2".

Toute la logique est à peu près la suivante : Anchor.onclick enregistre toujours la référence de i, et i continue de changer pendant la boucle, de i=1 à i=4, bien que pendant la boucle, Anchor.onclick soit enregistré une fois (remarque : le mot "une fois"),

Il y a trois cas : 1, 2 et 3, mais i finit par devenir 4, donc quel que soit le bouton sur lequel vous cliquez, "anchor4" sera affiché

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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：Code d'effet de porte multi-coulissante et multi-onglets implémenté par jQuery_jqueryArticle suivant：Code d'effet de porte multi-coulissante et multi-onglets implémenté par jQuery_jquery

Articles Liés

Voir plus