Warum zielen Ereignis-Listener in JavaScript-Schleifen immer auf das letzte Element ab?

Ereignis-Listener-Verhalten in Schleifen verstehen

In JavaScript ermöglichen Ereignis-Listener Elementen, auf Benutzeraktionen zu reagieren. Die Verwendung von Schleifen zum Hinzufügen von Ereignis-Listenern zu mehreren Objekten kann Bedenken hinsichtlich der Listener-Funktionalität aufwerfen.

Das Problem mit dem traditionellen Ansatz

Stellen Sie sich die folgende Situation vor: Sie versuchen hinzuzufügen Klicken Sie auf Ereignis-Listener für mehrere Elemente innerhalb einer „Container“-Klasse. Wenn Sie jedoch eine herkömmliche for-Schleife verwenden, stellen Sie fest, dass alle Listener am Ende auf das letzte Element in der Schleife abzielen.

Der Grund: Schließungen

Dieses Verhalten tritt auf aufgrund von Schließungen in JavaScript. Wenn Sie innerhalb der Schleife Variablen zuweisen, verweisen diese auf denselben Speicherort. Wenn Sie also versuchen, in den Ereignis-Listener-Funktionen auf diese Variablen zuzugreifen, beziehen sie sich immer auf die Werte der letzten Iteration.

Die Lösung: Sofortiger Aufruf

Um dieses Problem zu lösen Problem, verwenden Sie den sofortigen Aufruf innerhalb der Schleife. Dadurch erstellen Sie für jede Iteration einen neuen Ausführungskontext und stellen sicher, dass die Variablen in diesem Kontext lokal und ungebunden an die Schleifenvariablen bleiben.

Fester Code:

Der korrigierte Code unten nutzt den sofortigen Aufruf, um das gewünschte Verhalten zu erreichen:

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
    (function () {
        var k = i + 1;
        var boxa = elem[i].parentNode.id;
        var boxb = elem[k].parentNode.id;
        elem[i].addEventListener("click", function() { makeItHappen(boxa,boxb); }, false);
        elem[k].addEventListener("click", function() { makeItHappen(boxb,boxa); }, false);
    }()); // immediate invocation
}

In diesem korrigierten Code erstellt der sofortige Aufruf einen neuen Ausführungskontext für jede Iteration, sodass die Variablen boxa und boxb ihre richtigen Werte innerhalb der Ereignis-Listener-Funktionen beibehalten können.

Das obige ist der detaillierte Inhalt vonWarum zielen Ereignis-Listener in JavaScript-Schleifen immer auf das letzte Element ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!