Ausführliche Erläuterung der Lösung des Problems der Verschachtelung eines Klickereignisses in der JavaScript-for-Schleife

In diesem Artikel wird hauptsächlich die Lösung vorgestellt, ein Klickereignis in der for-Schleife von JavaScript zu verschachteln, um mehrere identische Werte gleichzeitig anzuzeigen, was einen guten Referenzwert hat. Schauen wir es uns mit dem Editor an.

Schauen Sie sich zunächst den folgenden Code an:

for(var i=0; i<10; i++) {
 $(&#39;#ul&#39;).bind(&#39;click&#39;, function() {
  alert(i)
 })
}

Für diesen Code, wenn Sie auf das Element klicken Mit der ID „ul“ wird ein Popup von 10 10 angezeigt. Warum erscheinen 10 10er?

Erstens ist das Klickereignis in diesem Code kein Bindungsereignis, sondern ein Bindungsereignis von jQuery, sodass es einen Unterschied zwischen Bindungsereignissen und gewöhnlichen Ereignissen gibt. Wenn in einem normalen Ereignis mehrere Klickereignisse zu einem Element hinzugefügt werden, überschreibt das letzte alle vorherigen Klickereignisse, und in einem Bindungsereignis kann nur das letzte Klickereignis ausgeführt werden Ereignisse sind an dasselbe Element gebunden und werden alle ausgeführt. Mit anderen Worten: onclick unterstützt in normalen Ereignissen nur ein einzelnes Ereignis und wird von anderen onclick-Ereignissen überschrieben, während Klickereignisse in der Ereignisbindung mehrere Ereignisse hinzufügen können, ohne sich Gedanken über ein Überschreiben machen zu müssen. Es ist also denkbar, dass beim Klicken auf das Element mit der ID „ul“ 10 Popup-Fenster auftauchen.

Wenn Sie es immer noch nicht verstehen, wird es nach der Transformation des Codes leicht zu verstehen sein.

Tatsächlich kann der obige Code in die folgende Form umgewandelt werden:

// i=0时
$('#ul').bind('click', function() {
  alert(i)
 })
// i=1时
$('#ul').bind('click', function() {
  alert(i)
 })
 
......
 
// i=10时
$('#ul').bind('click', function() {
  alert(i)
 })

Erweiterung: Der folgende Code ist ein Vergleich des obigen Originalcodes, weitere Erklärung Der Unterschied zwischen gewöhnlichen Ereignissen und Ereignisbindung

for(var i=0; i<10; i++) {
 document.getElementById(&#39;ul&#39;).onclick = function() {
  alert(i)
 }
}

Laufende Ergebnisse: 10 Popup-Fenster

Wenn das Klickereignis ausgelöst wird, werden natürlich 10 Popup-Fenster angezeigt. Vielleicht haben Sie Fragen? Warum ist es 10 mal 10? Sollte es nicht 0, 1, 2, 3 ... 10 sein? Um diesen Zweifel auszuräumen, kann der ursprüngliche Code erneut transformiert werden:

var i=0
 
$('#ul').bind('click', function() {
  alert(i)
 })
i=1
$('#ul').bind('click', function() {
  alert(i)
 })
 
......
 
i = 9
$('#ul').bind('click', function() {
  alert(i)
 })

Nachdem der ursprüngliche Code in diesen umgewandelt wurde, ist es offensichtlich, dass der Endwert von i 9 ist, aber gemäß dem Prinzip Wenn die Schleife in der for-Schleife erreicht ist, wird i++ ausgeführt, und dann wird festgestellt, dass i<10. Zu diesem Zeitpunkt ist die Bedingung nicht mehr erfüllt, sodass die Schleife beendet und beendet wird i-Wert ist 10. Dann ist es natürlich zu verstehen, warum das Endergebnis 10 Popup-Fenster mit einem Ergebnis von 10 sind.

Zusammenfassung: Dieser Code scheint einfach zu sein, deckt jedoch viele Wissenspunkte ab, wie z. B. Ereignisbindung, gewöhnliche Ereignisse und for-Schleifen.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Lösung des Problems der Verschachtelung eines Klickereignisses in der JavaScript-for-Schleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!