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

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

WBOY

Libérer： 2016-05-16 15:07:52

original

1309 Les gens l'ont consulté

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>

Copier après la connexion

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;

Copier après la connexion

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.