[Dúvida] Função ou addEventListener?

Olá, Rosemberg! Tudo certo?

Não se preocupe, sua dúvida é muito válida e comum para quem está começando a explorar JavaScript e manipulação de eventos em páginas web. Vamos lá!

O addEventListener e o atributo onclick são duas formas de adicionar eventos a elementos HTML, mas cada um tem suas particularidades e usos recomendados.

1. onclick:

   • É uma maneira direta de associar uma função a um evento de clique diretamente no HTML.
   • Exemplo: <button onclick="verificarChute()">Chutar</button>
   • É simples e fácil de usar, especialmente para projetos pequenos ou quando você está apenas começando.
   • No entanto, pode se tornar difícil de gerenciar em projetos maiores, onde a separação de HTML e JavaScript é desejável para manter o código organizado.

2. addEventListener:

   • Permite adicionar múltiplos ouvintes de eventos ao mesmo elemento, o que não é possível com onclick.
   • Exemplo em JavaScript:

     const botaoChutar = document.querySelector('.container__botao');
     botaoChutar.addEventListener('click', verificarChute);
     

   • Mantém o JavaScript separado do HTML, o que é uma boa prática de programação, especialmente em projetos maiores.
   • Oferece mais flexibilidade, pois você pode adicionar ouvintes para diversos tipos de eventos (não apenas clique) e remover ouvintes de eventos quando necessário.

Em resumo, para projetos pequenos ou quando você está começando, usar onclick pode ser mais direto e fácil. Já o addEventListener é mais flexível e escalável, sendo preferido em projetos maiores ou quando você precisa de mais controle sobre os eventos.

Espero ter ajudado e bons estudos!