Einführung in Probleme bei der Registrierung von Veranstaltungen, die durch js-Closure_Grundkenntnisse verursacht werden-js-Tutorial-php.cn

Einführung in Probleme bei der Registrierung von Veranstaltungen, die durch js-Closure_Grundkenntnisse verursacht werden

WBOY

Freigeben： 2016-05-16 15:07:43

Original

1159 Leute haben es durchsucht

Hintergrund: Ich habe in meiner Freizeit ein paar Artikel über js-Bereichsketten und -Verschlüsse gelesen und zufällig ein Problem gesehen, auf das ich zuvor gestoßen bin, nämlich das Ereignis „for-loop Register“. Treiber für den Dom-Knoten finden Sie im folgenden Code:

<!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>

Nach dem Login kopieren

Nach normaler Denkweise sollte das Ergebnis sein, dass beim Klicken auf drei Schaltflächen jeweils „Anker1“, „Anker2“ und „Anker3“ angezeigt werden. Ich dachte das zu Beginn des Zeitraums, aber das Ergebnis ist egal Wenn Sie auf die Schaltfläche klicken, wird „anchor4“ angezeigt.

Warum ist das so? Machen Sie sich keine Sorgen, lassen Sie es uns langsam analysieren. Es beinhaltet das Wissen über die Gültigkeitskette und den Abschluss von js, daher werde ich es hier nicht im Detail vorstellen.

Schauen wir uns zunächst „anchor.onclick“ an. Was ist das? Das ist ein DOM-Level-0-Unsinn. Ist der Blogger ein Psychopath? 🎜 >

ist eine Deklaration eines Event-Handlers, genau wie var name="Xiao Ming". Dies ist der Schlüssel, den wir noch nicht ausgeführt haben:

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;

Nach dem Login kopieren

Sehen Sie, wir verwenden den Debugger, um die Schleife zu stoppen, wenn i==2, und gehen dann zur Konsole, um die Klickereignisse von #anchor1 und #anchor2 manuell auszulösen, und die Konsole gibt „anchor2“ aus.

Die ganze Logik sieht ungefähr so aus: Anchor.onclick speichert immer die Referenz von i und i ändert sich während der Schleife ständig von i=1 zu i=4; das Wort „einmal“),

Es gibt drei Fälle von 1, 2 und 3, aber i wird schließlich zu 4, sodass unabhängig davon, auf welche Schaltfläche geklickt wird, „anchor4“ ausgegeben wird

Fazit: Das Wissen über die Gültigkeitskette und den Abschluss in js ist sehr wichtig. Obwohl ich hier nicht darüber gesprochen habe, befürchte ich tatsächlich, dass es nicht klar erklärt wird und es wird jeden in die Irre führen

Die obige Einführung zu Problemen bei der Registrierung von Veranstaltungen, die durch js-Abschlüsse verursacht werden, ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.