Listener ou onclick

Olá Eder, tudo bem com você?

Bem normalmente é comum quando estamos trabalhando acabar criar a parte de funções no javascript para deixar mais separado, e podemos também criar o onclick via javascript

function hello(){
    console.log("Olá");
}

var botao = document.querySelector(".classe");
botao.onclick = hello

E dessa forma também deixamos separado do html, agora a grande diferença entre o onclick e addEventListener é a quantidade de funções:

O onclick aceita apenas uma única função, então dado o exemplo anterior, se fizermos:

function outroHello () {
    console.log( " Mais um olá ");
} 

botao.onclick = hello;
botao.onclick = outroHello;

Ao apertar o botão teremos o seguinte resultado:

>> "Mais um olá"

Agora utilizando o addEventListener podemos passar uma série de funções:

botao.addEventListener("click", hello);
botao.addEventListener("click", hello);

Apertando o botão novamente:

>> "Olá"
>> "Mais um olá

Então aqui está a grande diferença :)

O onclick sobreescreve a função que está associada ao clique do mouse, enquanto o eventListener permite várias!

Compreendeu ? Qualquer coisa estou à disposição!

Abraços e Bons Estudos!!