Fehler mit this im JavaScript-Pfeilfunktions-Eventhandler

In letzter Zeit ist es modern geworden, überall Pfeilfunktionen anstelle von normalen zu verwenden. Diese Funktionen haben jedoch einen Haken - sie bewahren this nicht. Lassen Sie uns einen Blick auf das Problem werfen, auf das man deshalb stoßen kann.

Nehmen wir an, wir haben einen Button:

<button>text</button>

Wir holen uns eine Referenz auf diesen Button in eine Variable:

let button = document.querySelector('button');

Wir fügen dem Button einen Eventhandler hinzu, indem wir eine Pfeilfunktion verwenden:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

Hier erwartet uns eine Überraschung: this in der Pfeilfunktion bezieht sich nicht auf das Element, in dem das Ereignis ausgelöst wurde.

Lassen Sie uns sehen, was man dagegen tun kann.

Erste Lösung

Man kann auf die Verwendung von this verzichten und die Variable verwenden, an die das Ereignis gebunden ist:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

Zweite Lösung

Man kann das Element, an das das Ereignis gebunden ist, über event.target erhalten:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

Dritte Lösung

Man kann auf die Pfeilfunktion verzichten und eine normale Funktion verwenden:

button.addEventListener('click', function() {
	console.log(this.textContent);
});