Chyba this v JavaScriptovej šípkovej funkcii obsluhy udalosti

V poslednej dobe sa stalo módu používať všade šípkové funkcie namiesto obyčajných. Tieto funkcie však majú háčik - neukladajú this. Pozrime sa, s akým problémom sa môžeme kvôli tomu stretnúť.

Predpokladajme, že máme tlačidlo:

<button>text</button>

Získame odkaz na toto tlačidlo do premennej:

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

Pridáme na tlačidlo obsluhu udalosti použitím šípkovej funkcie:

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

Tu na nás čaká prekvapenie: this v šípkovej funkcii nebude odkazovať na element, v ktorom udalosť nastala.

Pozrime sa, čo sa s tým dá robiť.

Prvé riešenie

Môžeme sa vzdať použitia this a použiť premennú, na ktorú je udalosť naviazaná:

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

Druhé riešenie

Môžeme získať element, na ktorý je udalosť naviazaná, cez event.target:

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

Tretie riešenie

Môžeme sa vzdať šípkovej funkcie a použiť obyčajnú funkciu:

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