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 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;
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.
