Wie ordne ich Ereignishandler mithilfe von Schleifen ordnungsgemäß dynamisch generierten Elementen in JavaScript zu?

Event-Handler-Generierung mit Schleifen in Javascript

Bei der Arbeit mit dynamischen Webseiten ist es oft notwendig, Event-Handler mehreren Elementen zuzuweisen werden programmgesteuert generiert. Dies kann durch den Einsatz von Schleifen erreicht werden, die eine effiziente und zentralisierte Handhabung gewährleisten.

Ein häufiges Szenario ist die Generierung mehrerer Anker-Tags (a) aus einer AJAX-Antwort, wobei jedes Tag ein Onclick-Ereignis erfordert, das eine entsprechende Nummer alarmiert . Ein naiver Schleifenansatz wie der folgende funktioniert jedoch möglicherweise nicht wie beabsichtigt:

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

In diesem Beispiel teilen sich alle Event-Handler die gleiche Variable i, was dazu führt, dass der letzte Handler die vorherigen überschreibt und eine Warnung ausgibt: 11", unabhängig davon, auf welches Tag geklickt wurde.

Um dieses Problem zu beheben, ist es wichtig, für jeden Handler einen Abschluss zu erstellen und i als Parameter zu übergeben. Dadurch wird sichergestellt, dass jede Funktion ihren eigenen eindeutigen i-Wert hat:

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

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

Durch die Verwendung der handleElement-Funktion wird jedem Event-Handler ein eindeutiges i zugewiesen, sodass beim entsprechenden Anker die richtige Warnmeldung angezeigt werden kann Tag wird angeklickt.

Das obige ist der detaillierte Inhalt vonWie ordne ich Ereignishandler mithilfe von Schleifen ordnungsgemäß dynamisch generierten Elementen in JavaScript zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!