Javascript addEventListener funktioniert nicht wie erwartet

Question

Ich bin in einigen gängigen Javascript-Programmen suchen. Hier finden Sie eines fügt 4 Tasten auf den DOM und fügt einen Ereignis-Listener zu jedem von ihnen

for(var i =0;i<5;i++){ 
    var btn = document.createElement('button'); 
    btn.appendChild(document.createTextNode('Button' + i)); 

    //function 1 
    (function(i){ 
    btn.addEventListener('click', function(){console.log(i)}); 
    })(i); 

    //function 2 commented 
    /*btn.addEventListener('click', (function(i){ 
    return function(){ 
    console.log(i); 
    } 
    })(i));*/ 

    document.body.appendChild(btn); 
} 

beiden Funktion 1 und Funktion 2 Add-Ereignis-Listener auf die Tasten und perfekt funktionieren. Ich möchte wissen, warum der folgende Code nicht funktioniert: -

for(var i =0;i<5;i++){ 
    var btn = document.createElement('button'); 
    btn.appendChild(document.createTextNode('Button' + i)); 

    btn.addEventListener('click', function(){ 
     console.log('Clicked' + i); 
    }); 
    document.body.appendChild(btn); 
} 

Dieser Code protokolliert nur 5 für jede Schaltfläche beim Klicken. Warum verstehe ich das nicht, warum es einfach nicht den Wert für i für jede Schleife enthält?

Answer 1

Wenn addEventListener zu einem eventTarget hinzugefügt wird, während es die for Schleife verarbeitet, es tut den Hörer nicht auslösen.

Es wird später Phase ausgelöst, und zu diesem Zeitpunkt hat for-loop die Ausführung beendet und den Wert i aktualisiert.

Wenn Sie eine Funktion innerhalb des for-loop schaffen sie einen Verschluss und Bindung den Wert von i

Answer 2

Javascript hat keinen Blockbereich, wenn Sie var verwenden. Also, mit genau den Code, können Sie das „erwartete Ergebnis“ ersetzt haben var für let:

for(let i =0;i<5;i++){ 
 
    var btn = document.createElement('button'); 
 
    btn.appendChild(document.createTextNode('Button' + i)); 
 

 
    btn.addEventListener('click', function(){ 
 
     console.log('Clicked' + i); 
 
    }); 
 
    document.body.appendChild(btn); 
 
}