Wie kann ich Ereignishandler effizient dynamisch generierten Elementen in JavaScript zuweisen?

So generieren Sie Event-Handler effizient mithilfe von Schleifen in JavaScript

Angenommen, Sie haben dynamisch generierte Elemente in Ihrem HTML-Dokument, z. B. mehrere Anker-Tags . Um jedem dieser Elemente Ereignishandler zuzuweisen, können Sie die Verwendung einer Schleife ähnlich der folgenden in Betracht ziehen:

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

Dieser Ansatz führt jedoch nicht zum gewünschten Verhalten, da alle Handler dieselbe i-Variable verwenden . Dadurch wird nur der letzte Handler zugewiesen und es wird immer der Wert „11“ ausgegeben.

Um dieses Problem zu lösen, können Sie für jeden Handler eine separate Funktion verwenden, die i als Argument verwendet. Dadurch wird sichergestellt, dass jeder Handler seine eigene i-Variable hat:

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

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

Durch die Verwendung dieser Technik wird jedem Handler sein eindeutiger Wert von i zugewiesen und das gewünschte Verhalten wird erreicht, wobei jeder Handler den richtigen Wert meldet ( 1 bis 10).

Das obige ist der detaillierte Inhalt vonWie kann ich Ereignishandler effizient dynamisch generierten Elementen in JavaScript zuweisen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!