2

Estou estudando js e me deparei com o seguinte:

const h1 = document.querySelector('h1');

  //1
  h1.addEventListener('click', () => {
    alert('Funcionou!');
  });

  //2
  h1.onclick = () => {
    alert('Funcionou!');
  };

qual a diferença nas duas abordagens acima?

0

2 Respostas 2

0

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

  • Espero ter ajudado.
7
  • 1
    Não entendi o negativo. A explicação está correta. Commented 15/04/2020 às 10:57
  • 1
    Eu também não entendi. Mas estou aprendendo a respeitar e aceitar a opção de votos das pessoas. Por isso que eu entro na questão de ter que justificar o upvote e o downvote. Mas enfim, essa história já rendeu. Commented 15/04/2020 às 19:08
  • Pow, vlw pela resposta, explicação que estava precisando. Ajudou muito. Commented 15/04/2020 às 21:15
  • 1
    Devo estar despertando amor em alguém por aqui e não sei. Rs Commented 16/04/2020 às 5:52
  • 1
    ... porém o mais importante foi ter ajudado o rapazinho ali. Isso já me é o suficiente. Commented 16/04/2020 às 5:55
-2

Também sou estudante de Js e não tenho tanto embasamento para falar, porém acredito que ambas fazem a mesma coisa só que usando recursos diferentes: //1 usou um listener da lib e na //2 usou o DOM para ouvir o evento de clique.

3
  • 3
    Sua resposta tem mais valor se você pesquisar e adicionar referências. Quando a base é o achismo, passa a ser mais uma opinião do que uma resposta. Não digo que você está errado, mas sim que sua resposta pode ficar melhor. Commented 14/04/2020 às 20:13
  • Creio que eu tenha feito uma introdução mencionando isso amigo, obrigado. Commented 14/04/2020 às 20:24
  • 1
    Esse espaço é exclusivo para respostas. Quando tiver pontos de reputação suficiente vai poder deixar comentários em perguntas e respostas. Até lá use esse campo apenas para respostas que solucionem ao problema proposto. Commented 15/04/2020 às 3:34

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .