Diferença de evento pelo atributo e com addEventListener

Olá Junior Volonte!

Ambas as formas de atribuir um evento a um elemento HTML têm o mesmo objetivo, que é executar uma função quando um evento específico ocorre. No entanto, existem algumas diferenças entre elas.

1. Sintaxe: A primeira diferença está na sintaxe. A forma usando onclick é uma atribuição direta da função ao evento. Já a forma usando addEventListener permite atribuir múltiplas funções a um mesmo evento, além de oferecer mais flexibilidade.

2. Suporte a múltiplos eventos: Com o onclick, você pode atribuir apenas uma função a cada evento. Se você atribuir uma nova função a onclick, ela substituirá a função anteriormente atribuída. Por outro lado, com o addEventListener, você pode adicionar várias funções para o mesmo evento, sem remover as atribuições anteriores.

3. Manipulação de eventos: Ao usar addEventListener, você tem mais controle sobre a manipulação dos eventos. É possível usar o método removeEventListener para remover uma função atribuída anteriormente, o que pode ser útil em certos cenários.

Em relação às boas práticas, o uso de addEventListener é mais recomendado atualmente, pois oferece maior flexibilidade e extensibilidade em comparação com a atribuição direta do evento (onclick). Além disso, é uma prática recomendada separar a lógica do evento da marcação HTML, o que pode ser mais fácil de realizar usando addEventListener em um arquivo JavaScript separado.

Quanto ao desempenho, em termos práticos, a diferença entre as duas abordagens é insignificante na maioria dos casos. O desempenho pode variar dependendo da implementação do navegador, mas geralmente não é uma preocupação significativa.

No geral, se você precisa atribuir apenas uma função a um único evento, a abordagem com onclick é mais simples e direta. No entanto, se você deseja mais flexibilidade e a capacidade de adicionar ou remover várias funções para um mesmo evento, o uso de addEventListener é a opção recomendada.

Espero que isso esclareça sua dúvida!