14

Gostaria de saber qual a diferença entre, por exemplo, <p onclick="fn()">click</p>, addEventListener('click', fn()); e document.getElementById().onclick = fn();.

Existe alguma relação com performance? Existe diferença de prioridade entre eles? Existe algum cenário especifico para cada um?

3 Respostas 3

10

Funcionalmente, creio não haver diferença nenhuma entre ambos os métodos, tanto um como outro, irá executar a função fn() assim que esse elemento for clicado. As diferenças existentes entre os dois tipos, talvez seja mais em termos de limitações do que modo de operação.

<p onclick="fn()">click</p>
addEventListener('click', fn()); 
document.getElementById().onclick = fn();

Talvez devesses saber que essa forma de lidar com eventos, foi padronizada pelo Netscape ainda no DOM Level 0, para que pudessem executar eventos Javascript, e fora posteriormente adotada pelos mais variados navegadores. Só à partir do DOM Level 2 foram introduzidos novos métodos, como o addEventListener.

As principais diferenças existentes para com o método tradicional (onclick="..."), são que vários manipuladores de eventos podem ser registrados para o mesmo evento, maior controle sobre quando o evento é acionado, e funciona com qualquer elemento DOM.

Um equívoco comum com o modelo em linha é a crença de que ele permite que o registro de manipuladores de eventos com argumentos personalizados. «1»

Sendo que o que realmente acontece é que o motor de JavaScript do navegador cria uma função anônima contendo as declarações existentes no atributo onclick.

Outro fato a considerar talvez seja a portabilidade que estes apresentam. Por exemplo, se quisermos mudar o nome da uma função vinculada a um evento de clique de um botão, teríamos que fazer as alterações diretamente no código HTML. Dentre estas existem ainda várias outras particularidades para cada, sendo que tanto um como outro, possuem vantagens e desvantagens em casos específicos.

Atualmente existem alguns problemas de compatibilidade para alguns dos padrões impostos pela W3C (DOM Level 3) e o IE8, por isso, alguns dos métodos podem não funcionar em certos navegadores.

Algumas Referências:

2
  • Na segunda e terceira linha de código, deverai ser fn ao invéz de fn() Commented 19/11/2015 às 23:13
  • @GuilhermeBernal faz algum tempo desde que respondi a pergunta, e a tua sugestão é também já muito antiga, mas de qualquer das formas responderei, escrevi fn() para simbolizar uma função, o mesmo poderia ser function(callack){} ou simplesmente interpretar fn() como uma função definida anteriormente, os parênteses são indicação de parâmetros nesse meu exemplo.
    – Edilson
    Commented 25/02/2019 às 21:45
9

A resposta do @Edilson tem uma abordagem teórica, vou tentar explicar na prática as diferenças.

Adicionar manipuladores de eventos (event handlers) com atributo HTML ou com as propriedades .on* tem as seguintes características:

  • só é possível atribuir um único manipulador por evento e elemento
  • para remover um manipulador basta configurar a propriedade como nulo ou false

A atribuição pelo atributo HTML tem as seguintes características além das descritas acima:

  • vai contra a prática de separação de conceitos (Separation of concerns - SoC), que visa separar exibição (HTML) e comportamento (javascript)
  • não aceita funções anonimas (exceto self executing anonymous function)
  • o objeto event estará acessível, tal como é com this, pois ao utilizar o atributo onclick="exemplo();" a propriedade .onclick do elemento terá o valor:
function onclick(event) {
  exemplo();
}

Registrar uma espera de evento (event listener) com addEventListener() tem as seguintes características:

  • é possível registrar mais de um listener por evento e elemento
  • a remoção de listeners é feita pela função removeEventListener()
  • remover listeners de funções anonimas só é possível de dentro da própria função utilizando arguments.callee como referência

Não existe um prioridade da execução por um dos métodos, as funções serão executadas na ordem que foram adicionadas.

Sobre performance, considero que a diferença seja irrelevante.

2

Complementando as respostas dos rapazes e para ajudar as pessoas que quiserem ver a diferença de execução, vou deixar dois exemplos práticos que mostra a diferença entre o onclick() e o addEventListenner().

Repare que no onclick() a função só é executada uma vez. Já no addEventListenner() as duas funções são executadas.

Com onclick()

let element = document.querySelector("#botao");

element.onclick = function() {
  alert("Primeira função");
}
element.onclick = function() {
  alert("Segunda função");
}
<button id="botao">Apertar</button>

Com addEventListenner()

let element = document.querySelector("#botao");

element.addEventListener("click", function() {
  alert("Primeira função");
});

element.addEventListener("click", function() {
  alert("Segunda função");
});
<button id="botao">Aperte</button>

Você deve fazer log-in para responder a esta pergunta.

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