Introduction aux problèmes d'inscription aux événements causés par js Closure

Introduction aux problèmes d'inscription aux événements causés par js Closure_Basic Knowledge

WBOY

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

original

1173 Les gens l'ont consulté

Contexte : J'ai lu quelques articles sur les chaînes et les fermetures de portée js pendant mon temps libre, et j'ai accidentellement vu un problème que j'ai rencontré auparavant, qui se trouve dans l'événement d'enregistrement de la boucle for pilote pour le nœud dom, 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 existe trois cas de 1, 2 et 3, mais i finit par devenir 4, donc quel que soit le bouton sur lequel vous cliquez, "anchor4" sera affiché

Conclusion : La connaissance de la chaîne de portée et de la fermeture en js est très importante Même si je n'en ai pas parlé ici, j'ai en fait peur que cela ne soit pas expliqué clairement. et cela induira tout le monde en erreur

L'introduction ci-dessus aux problèmes d'inscription aux événements causés par les fermetures de js est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.