A principal diferença é que com o onclick() vc consegue associar apenas uma função como callback do evento. Já com o addEventListener() vc pode utilizar quantas funções quiser que todas elas serão ativadas quando o evento ocorrer.
Ambos estão corretos, mas nenhum deles é "melhor" por si só, e pode haver um motivo para o desenvolvedor escolher usar as duas abordagens.
Exemplo com o onclick (Só será executada a segunda função):
let element = document.querySelector("#botao");
element.onclick = function() {
alert("Primeira função");
}
element.onclick = function() {
alert("Segunda função");
}
<button id="botao">Aperte</button>
Exemplo com o addEventListenner (Serão executadas a primeira e segunda função):
let element = document.querySelector("#botao");
element.addEventListener("click", function() {
alert("Primeira função");
});
element.addEventListener("click", function() {
alert("Segunda função");
});
<button id="botao">Apertar</button>
OBS: O addEventListener() não funciona em versões anteriores ao Internet Explorer 9. Já o onclick() funciona em versões anteriores.
Referências:
- Alura
- Stackoverflow