Erreur liée à this dans le gestionnaire d'événements en fonction fléchée JavaScript

Dernièrement, il est devenu à la mode d'utiliser des fonctions fléchées partout à la place des fonctions ordinaires. Ces fonctions, cependant, ont un inconvénient - elles ne préservent pas le this. Regardons le problème auquel on peut être confronté à cause de cela.

Supposons que nous ayons un bouton :

<button>text</button>

Obtenons une référence à ce bouton dans une variable :

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

Attachons un gestionnaire d'événement au bouton, en utilisant une fonction fléchée :

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

C'est là que nous attend une surprise : le this dans la fonction fléchée ne se référera pas à l'élément dans lequel l'événement s'est produit.

Voyons ce que l'on peut faire à ce sujet.

Première solution

On peut renoncer à l'utilisation de this et utiliser la variable à laquelle l'événement est lié :

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

Deuxième solution

On peut obtenir l'élément auquel l'événement est lié via event.target :

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

Troisième solution

On peut renoncer à la fonction fléchée et utiliser une fonction ordinaire :

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