Analysieren Sie Probleme bei der Registrierung von Ereignissen, die durch js-Closure_Javascript-Kenntnisse verursacht werden-js-Tutorial-php.cn

Analysieren Sie Probleme bei der Registrierung von Ereignissen, die durch js-Closure_Javascript-Kenntnisse verursacht werden

WBOY

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

Original

1302 Leute haben es durchsucht

Hintergrund: Ich habe in meiner Freizeit ein paar Artikel über die JS-Scope-Kette und den Abschluss gelesen und versehentlich ein Problem gesehen, auf das ich zuvor gestoßen bin, nämlich die Registrierung des Ereignistreibers für den Dom-Knoten in der for-Schleife, siehe Einzelheiten 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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.