Wie vermeidet man Schließungsfallen bei der dynamischen Generierung von Event-Handlern in JavaScript?

So generieren Sie Event-Handler dynamisch mithilfe von Schleifen in Javascript

In bestimmten Szenarien ist es notwendig, Event-Handler einer Reihe von Elementen zuzuweisen Dynamisch durch Javascript generiert, oft als „Schleife durch Ereignishandler“ bezeichnet. Dieses Problem tritt auf, wenn die generierten Elemente ähnliche Funktionalitäten haben und Ereignishandler mit eindeutigem Verhalten erfordern, im Gegensatz zur Verwendung von Inline-Ereignishandlern.

Betrachten Sie das Beispiel, in dem Sie 10 Tags, die aus einer AJAX-Antwort generiert wurden, und Sie möchten jedem von ihnen in einer Schleife ein Onclick-Ereignis zuweisen. Der folgende Code scheint eine einfache Lösung zu sein:

for (i = 1; i < 11; i++) {
  document.getElementById("b" + i).onclick = function () {
    alert(i);
  };
}

Bei der Ausführung weist dieser Code das Onclick-Ereignis jedoch nur dem letzten zu. Tag und zeigt für alle Klicks „11“ im Warnfeld an. Der Grund für dieses Verhalten liegt darin, dass alle Event-Handler die gleiche i-Variable verwenden, die in der Schleife inkrementiert wird und letztendlich auf die zuletzt generierte -Variable zeigt. Tag.

Um dieses Problem zu beheben und sicherzustellen, dass jedes Da das Tag über einen eigenen eindeutigen Ereignishandler verfügt, müssen Sie für jeden Handler eine separate Funktion definieren und den i-Wert als Parameter übergeben. Auf diese Weise verfügt jeder Handler über eine eigene Instanz der i-Variablen, wodurch die beabsichtigte Funktionalität erhalten bleibt:

function handleElement(i) {
  document.getElementById("b" + i).onclick = function () {
    alert(i);
  };
}

for (i = 1; i < 11; i++) {
  handleElement(i);
}

Dieser überarbeitete Code weist jedem unterschiedliche Onclick-Ereignishandler zu. Tag, und wenn ein Wenn auf das Tag geklickt wird, wird im Warnfeld der korrekte i-Wert angezeigt, der das erwartete Verhalten widerspiegelt. Mit dieser Technik können Sie Ereignishandler für eine Reihe von Elementen dynamisch generieren und so die ordnungsgemäße Verarbeitung von Ereignissen für jedes einzelne Element sicherstellen.

Das obige ist der detaillierte Inhalt vonWie vermeidet man Schließungsfallen bei der dynamischen Generierung von Event-Handlern in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!