JavaScript: funzioni arrow e gestione degli eventi

In JavaScript le funzioni arrow creano una condizione particolare nella gestione degli eventi.

Consideriamo il seguente codice:

const button = document.querySelector('#btn');

button.addEventListener('click', evt => {
    console.log(this); // Non fa riferimento a button
}, false);

Se vogliamo comunque usare le funzioni arrow con gli eventi, dobbiamo far riferimento alla proprietà target dell'oggetto Event per risolvere il problema.

const button = document.querySelector('#btn');

button.addEventListener('click', evt => {
    console.log(evt.target); // Fa riferimento a button
}, false);