Wie kann man überlappende Variablenreferenzen in mit Schleifen erstellten JavaScript-Ereignishandlern verhindern?

So vermeiden Sie überlappende Variablenreferenzen beim Generieren von Event-Handlern mit Schleifen in JavaScript

In JavaScript ist es beim Erstellen von Event-Handlern mit Schleifen wichtig um das Problem der Variablenreferenzierung anzugehen. Die ursprüngliche Frage zeigt, wie eine Schleife, die Onclick-Ereignisse mehreren Elementen zuweist, aufgrund des Zugriffs auf gemeinsam genutzte Variablen zu unerwartetem Verhalten führen kann.

Das Problem tritt auf, wenn alle Ereignishandler auf dieselbe Variable verweisen, die bei jeder Iteration von aktualisiert wird die Schleife. Dadurch behält nur der letzte Event-Handler den Endwert der Variablen.

Um dieses Problem zu beheben, besteht die Lösung darin, für jeden Event-Handler eine separate Funktion mit der Variable als Parameter zu definieren. Dadurch wird sichergestellt, dass jeder Handler über eine eigene Kopie der Variablen verfügt, wodurch das Problem überlappender Referenzen vermieden wird.

Hier ist der korrigierte Code:

// Define a function that takes the variable as a parameter
function handleElement(i) {
    document.getElementById("b" + i).onclick = function () {
        alert(i);  // Each handler has its own i
    };
}

// Iterate through the elements and call the function
for (i = 1; i < 11; i++) {
    handleElement(i);
}

Durch die Verwendung dieses Ansatzes verfügt jeder Event-Handler über seinen eigenen dedizierte Variablenreferenz, um sicherzustellen, dass sie sich wie erwartet verhält und basierend auf dem Element, dem sie entspricht, den richtigen Wert meldet.

Das obige ist der detaillierte Inhalt vonWie kann man überlappende Variablenreferenzen in mit Schleifen erstellten JavaScript-Ereignishandlern verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!