Solucionado
Durante as aulas, a Vanessa alterou o atributo da tag pra dar a ação. Mas eu já sabia que também é possível adicionar um listener pra lançar uma função quando algum evento ocorresse. Na prática, eles parecem fazer a mesma coisa. Existe alguma diferença conceitual, de performance, de manutenção, de segurança ou qualquer coisa que faça um ser mais indicado que o outro?
Valeu! Abraço! Mayk
Oi, Mayk! Tudo tranquilo?
Então, existe sim diferença entre os dois manipuladores de eventos. A principal delas é que você consegue adiciona apenas uma manipulador de eventos no onclick, enquanto que com o addEventListener() você consegue utilizar quantos manipuladores de eventos quiser.
Os dois métodos são possíveis de executar no seu código JavaScript, apesar de ser mais comum chamar uma função de callback no onclick no código HTML mesmo.
//Ex:
<element onclick="minhaFunção">Quando ambos são utilizados no código JavaScript, o addEventListener() pode chamar quantos manipuladores você quiser, e nenhum sobrescreve o outro. Já o onclick() você até consegue definir mais manipuladores para um mesmo elemento, mas um manipulador sobrescreve o outro na execução.
Em resumo:
| addEventListener | onclick |
|---|---|
| addEventListener pode adicionar vários eventos a um elemento específico | onclick pode adicionar apenas um único evento a um elemento. É basicamente uma propriedade, por isso é sobrescrito. |
| addEventListener pode receber um terceiro argumento que pode controlar a propagação do evento. | A propagação de eventos não pode ser controlada por onclick. |
addEventListener só pode ser adicionado dentro de elementos <script> ou em arquivo JavaScript externo. | onclick também pode ser adicionado como um atributo HTML. |
Se você tiver mais dúvidas pode consultar a documentação sobre estes métodos neste link.
Abraços e bons estudos!
Boa! Não tinha pensado em adicionar mais de um evento no mesmo trigger. Legal! Valeu!!
Abraço!