Uma dúvida, para os botões foi incluido um evento de listener para escutar o click, qual a diferença do listener para o onclick? Existe alguma vantagem de performance ou é apenas par separação do html do javascript?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Uma dúvida, para os botões foi incluido um evento de listener para escutar o click, qual a diferença do listener para o onclick? Existe alguma vantagem de performance ou é apenas par separação do html do javascript?
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 = helloE 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!!