Titan Javascript: Wie erstelle ich dynamische EventListener? - Javascript, Arrays, Referenz, Titan, Addeventlistener

Ich habe eine Reihe von Schaltflächen und möchte jedem von ihnen einen eventListener hinzufügen.

Im eventListener möchte ich den Breitenwert der Schaltfläche abrufen, die gerade gedrückt wird. Wie kann ich das machen?

for (i=0; i<5; i++) {
button[i].addEventListener(click, function(e) {
alert(/*How should I refer to THAT button*/)
})
}

Antworten:

Innerhalb des Ereignis-Listeners können Sie verwenden this um auf die aktuelle Schaltfläche zu verweisen:

for (var i=0; i<5; i++) {
button[i].addEventListener("click", function(e) {
alert( this ); // <-- This inside the event listener = current button
});
}

Eine andere Methode besteht darin, den Körper der Schleife in einen Abschluss zu wickeln und eine lokale Variable zu erstellen:

for (var i=0; i<5; i++) {
(function(button) { // <--- Local variable
button.addEventListener("click", function(e) {
alert( button );
});
})(button[i]);      // <-- Pass button
}

Anstatt an jeder Schleife eine neue Funktion zu erstellen, können Sie auch eine benannte Funktion außerhalb der Schleife erstellen:

function createButtonEvent(button) {
button.addEventListener("click", function(e) {
alert( button );
});
}
for (var i=0; i<5; i++) {
createButtonEvent(button[i]);
}