onclick e função anônima. | JavaScript: manipulando elementos no DOM

Olá, Bruno!

O método que você mencionou, que usa uma função anônima para atribuir uma ação ao evento de clique, é uma prática bastante comum e ainda muito utilizada.

No entanto, a abordagem utilizada na vídeo aula, é o addEventListener(), é uma forma mais moderna e versátil de lidar com eventos em JavaScript. Isso porque ela permite que você adicione mais de um listener para o mesmo evento em um elemento, o que não é possível com a abordagem que você mostrou.

Por exemplo, se você quiser adicionar duas ações diferentes ao clicar em um botão, você poderia fazer algo assim:

btnFoco.addEventListener('click', function () {
    html.setAttribute('data-contexto', 'foco')
})

btnFoco.addEventListener('click', function () {
    console.log('O botão foi clicado!')
})

Neste exemplo, tanto o atributo data-contexto será alterado para 'foco' quanto a mensagem 'O botão foi clicado!' será exibida no console quando o botão for clicado. Isso não seria possível com a abordagem btnFoco.onclick = function () {...} porque cada nova atribuição a onclick substituiria a anterior.

Portanto, a abordagem usada na aula é atual, além de oferecer mais flexibilidade para lidar com eventos.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!