Oi, Vinicius, tudo bem?
O shortcut ele tem o propósito de encurtar a sintaxe do addEventListener()
, que exige parâmetros mas isso o torna mais poderoso, podendo executar mais de uma função por evento, como no exemplo da aula:
var botao = document.querySelector('#botao');
function botaoHandler() {
alert('Botão clicado');
}
function outroHandler() {
alert('Botão clicado também!');
}
botao.addEventListener('click', botaoHandler);
botao.addEventListener('click', outroHandler);
Aqui, ambas as funções serão executadas como numa pilha, primeiro a função botaoHandler
e em seguida outroHandler
e se você quiser adicionar mais funções ao mesmo clique do botão, irá sequencialmente, como numa pilha em que o primeiro que está sendo chamado será o primeiro a ser executado e assim, sucessivamente.
A sintaxe shortcut, que é a onclick
executa um evento de click, ou qualquer outro evento, por função. Então, se o seu evento necessitar de mais uma função para aquele mesmo evento, nesse caso, o click no botão, essa forma não é a forma indicada pois ela sobrescreve, ele não cria uma pilha de eventos em que as funções serão chamadas sequencialmente como o addEventListener()
.
Por boa prática, o interessante é criar o evento através do addEventListener()
pois caso o evento cresça, ele irá executar quantas funções forem adicionadas diferente do onclick
.
Na documentação tem mais informações: https://developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/onclick
Se ficou alguma dúvida, é só falar!