Eventos no JavaScript

Bom dia, Gabriel! Como vai?

A diferença entre os dois é que com o primeiro vc só consegue definir um callback para o evento em questão, no caso o click. Se vc quiser que duas funções sejam executadas no click do mouse e fizer algo como:

meuBotao.onclick = minhaFuncao1;
meuBotao.onclick = minhaFuncao2;

O que vai acontecer é que apenas a minhaFuncao2() será executada sobrescrevendo o comportamento definido na primeira linha.

Já com a segunda forma, vc consegue adicionar quantas funções callback vc quiser sem sobrescrever o comportamento definido anteriormente!

meuBotao.addEventListener("click", minhaFuncao1);
meuBotao.addEventListener("click", minhaFuncao2);

Com esse código, ao clicar no botão, as duas funções serão executadas!

Por isso, a boa prática é que vc use a segunda forma sempre que quiser adicionar um determinado callback para um evento justamente por saber que dessa maneira não irá sobrescrever comportamentos anteriores que possam ser importantes.

Pegou a ideia?

Grande abraço e bons estudos!

Perfeito!!