Por que uso da sintaxe () => {} no AddEventListener?

Olá, Daniel! Como vai?

Entendo que a sintaxe de arrow function () => {} possa parecer um pouco confusa no começo, mas é uma forma muito prática e concisa de escrever funções em JavaScript. No seu exemplo, () => {} é uma função que está sendo passada como segundo argumento para o método addEventListener.

Vamos a um exemplo prático para entender melhor. Suponha que você queira criar uma função que imprima "Olá, mundo!" no console. Você poderia fazer isso de duas maneiras:

1. Usando a sintaxe de função tradicional:

function dizOla() {
    console.log("Olá, mundo!");
}

1. Usando a sintaxe de arrow function:

const dizOla = () => {
    console.log("Olá, mundo!");
}

Ambas as funções fazem exatamente a mesma coisa.

Agora, vamos ao addEventListener. Este é um método que adiciona um ouvinte de eventos a um elemento do DOM. O primeiro argumento é o tipo de evento que você quer ouvir (no seu caso, um clique), e o segundo argumento é a função que será executada quando esse evento ocorrer.

No código da aula, a função que será executada quando o evento de clique ocorrer é a função arrow que muda o atributo 'data-contexto' do elemento HTML para 'foco'.

Se você preferir, pode definir a função separadamente e então passá-la como argumento para o addEventListener, assim:

function mudaContextoParaFoco() {
    html.setAttribute('data-contexto', 'foco');
}

focoBt.addEventListener('click', mudaContextoParaFoco);

Nesse caso, mudaContextoParaFoco é a função que será executada quando o evento de clique ocorrer. Note que não usamos parênteses após o nome da função quando a passamos como argumento para o addEventListener. Isso porque não queremos executar a função imediatamente, e sim passá-la para que o addEventListener a execute quando o evento de clique ocorrer.

Arrow function deve ser utilizada quando não precisamos usar a função novamente, pelo fato de ela não ter nome e não ter como declará-la em outra parte do código.

Espero ter ajudado e bons estudos!

Ia fazer a mesma pergunta. Grato pela explicação.