Solucionado
Fala pessoal, gostaria de saber se alguém sabe se existe diferença entre fazer os eventos conforme é feito no curso
tecla.onclick = function () {
tocaSom(idAudio);
};e dom addEventListener
tecla.addEventListener("click", function () {
tocaSom(idAudio);
});Existe alguma diferença? Recomendação de boa pratica? Performance?
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.
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.
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.
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!