Warum verweisen Event-Handler in JavaScript-Schleifen auf dieselben Variablen?

Arbeiten mit Event-Handlern in JavaScript-Schleifen: Verwendung von Abschlüssen für eine eindeutige Ereignisbehandlung

In JavaScript werden bei der Arbeit mit HTML-Code Event-Handler abgespielt eine entscheidende Rolle bei der Ermöglichung von Benutzerinteraktionen mit der Webseite. Eine häufige Herausforderung entsteht jedoch, wenn diese Ereignishandler innerhalb einer Schleife definiert werden, was zu unerwartetem Verhalten führt.

Um dieses Problem zu veranschaulichen, betrachten Sie den folgenden Codeausschnitt:

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function() {
        onStatusChanged(select, callid, anotherid);
    };
    td.appendChild(select);
}

Bei einer Änderung Das Ereignis wird für ein ausgelöst. Element deuten empirische Belege darauf hin, dass dieselben Werte an die onStatusChanged()-Methode übergeben werden, unabhängig von der spezifischen -Methode. Element, das das Ereignis ausgelöst hat. Dieses Verhalten ergibt sich aus der Art und Weise, wie JavaScript Abschlüsse beim Definieren von Ereignishandlern implementiert.

Konkret bezieht sich der Abschluss select.onchange = function() innerhalb der Schleife auf die Variablen callid und anotherid, die die während der Schleife zugewiesenen Werte tragen letzte Iteration der Schleife. Wenn ein Ereignis ausgelöst wird, sind die Werte dieser Variablen daher nicht diejenigen, die mit dem spezifischen verknüpft sind. Element, sondern die neuesten, die während der Ausführung der Schleife festgelegt wurden.

Um dieses Problem zu beheben, kann ein Abschluss implementiert werden, um die Werte von select, callid und anotherid zum Zeitpunkt der Definition des Ereignishandlers zu erfassen. Der folgende Code demonstriert diesen Ansatz:

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s,c,a)
    {
        return function()
        {
            onStatusChanged(s,c,a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}</code>

Nach dem Login kopieren

Zusammenfassend ist die Verwendung von Abschlüssen bei der Definition von Event-Handlern innerhalb von JavaScript-Schleifen wichtig, um sicherzustellen, dass die Event-Handler-Funktionen die entsprechenden Werte der beteiligten Variablen erhalten. Diese Vorgehensweise ermöglicht eine unterschiedliche Ereignisbehandlung basierend auf dem spezifischen

Element, das das Ereignis auslöst.

Das obige ist der detaillierte Inhalt vonWarum verweisen Event-Handler in JavaScript-Schleifen auf dieselben Variablen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!