jQuery.click () vs onClick


558

Eu tenho um aplicativo jQuery enorme e estou usando os dois métodos abaixo para eventos de clique.

Primeiro método

HTML

<div id="myDiv">Some Content</div>

jQuery

$('#myDiv').click(function(){
    //Some code
});

Segundo método

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

Chamada de função JavaScript

function divFunction(){
    //Some code
}

Eu uso o primeiro ou o segundo método no meu aplicativo. Qual é o melhor? Melhor para o desempenho? E padrão?


9
Você pode aprender sobre as várias maneiras de anexar manipuladores de eventos e suas vantagens / desvantagens aqui: quirksmode.org/js/introevents.html . O jQuery é apenas um bom invólucro para registro avançado de eventos.
Felix Kling

12
Lembre-se de colocar a função de clique dentro do $ (document) (função .ready ().
joan16v

Respostas:


559

O uso $('#myDiv').click(function(){é melhor , pois segue o modelo padrão de registro de eventos. (o jQuery usa internamenteaddEventListener e attachEvent).

Basicamente, registrar um evento de maneira moderna é a maneira discreta de lidar com eventos. Também para registrar mais de um ouvinte de evento para o destino, você pode chamar addEventListener()o mesmo destino.

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

Por que usar addEventListener? (Do MDN)

addEventListener é a maneira de registrar um ouvinte de eventos, conforme especificado no DOM do W3C. Seus benefícios são os seguintes:

  • Permite adicionar mais de um manipulador único para um evento. Isso é particularmente útil para bibliotecas DHTML ou extensões Mozilla que precisam funcionar bem, mesmo que outras bibliotecas / extensões sejam usadas.
  • Dá a você um controle mais refinado da fase quando o ouvinte é ativado (captura x bolhas)
  • Funciona em qualquer elemento DOM, não apenas em elementos HTML.

Mais sobre o registro de eventos modernos -> http://www.quirksmode.org/js/events_advanced.html

Outros métodos, como definir os atributos HTML , exemplo:

<button onclick="alert('Hello world!')">

Ou propriedades do elemento DOM , exemplo:

myEl.onclick = function(event){alert('Hello world');}; 

são antigos e podem ser facilmente redigidos.

O atributo HTML deve ser evitado, pois torna a marcação maior e menos legível. Preocupações de conteúdo / estrutura e comportamento não são bem separadas, dificultando a localização de um bug.

O problema com o método de propriedades do elemento DOM é que apenas um manipulador de eventos pode ser vinculado a um elemento por evento.

Mais sobre o tratamento tradicional de eventos -> http://www.quirksmode.org/js/events_tradmod.html

Referência MDN: https://developer.mozilla.org/en-US/docs/DOM/event


13
Digamos que você execute o $('#myDiv').click(function(){código primeiro e, em seguida, gere 20 linhas de HTML dinamicamente a partir do JavaScript e cada linha possui um botão que, quando clicado, o JavaScript é necessário para executar a mesma função. Se você fizer isso primeiro, ele não funcionará, pois o manipulador de eventos foi adicionado antes da geração do HTML. Parece mais fácil onclick="functionName()"inserir o HTML gerado dinamicamente, em seguida, o botão funciona imediatamente. Ou você conhece uma solução mais elegante para essa situação?
zuallauz 27/09/12

17
@zuallauz nesse caso, o jQuery oferece .delegate()função. Ele anexará o evento a qualquer elemento que aparecerá no futuro no site.
Zefiryn 27/09/12

17
O @SimonRobb .liveestá obsoleto. Use .delegatepara versões mais antigas ou .onpara versões mais recentes do jQuery.
Selvakumar Arumugam 28/09/12

4
@Vega, bons pontos. E a legibilidade? Agora você deve procurar todos os arquivos JS referenciados na página para ver todos os manipuladores de clique de um elemento pelo ID do elemento, em vez de procurar o nome da função. Qual é a sua opinião sobre isso?
Supertonsky

6
Eu concordo com @supertonsky. Eu discordo totalmente que $ ('# myDiv'). Click (function () {é melhor. Em um aplicativo javascript grande, a ligação a um evento torna-se extremamente difícil de encontrar todas as referências a esse destino. É a ligação em uma classe ?, um id, uma criança referências a uma tag html e o que acontece se as mudanças CSS e nomes de classe que você obrigado a precisar de ser mudado na minha experiência de trabalho com outros código torna-se muito feia muito rápido?.
Jon

65

Para um melhor desempenho, use o JavaScript nativo. Para um desenvolvimento mais rápido, use jQuery. Verifique a comparação no desempenho em jQuery x desempenho do elemento nativo .

Eu fiz um teste no Firefox 16.0 de 32 bits no Windows Server 2008 R2 / 7 de 64 bits

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

Para eventos de clique, marque Eventos do navegador nativo x gatilho jquery ou jQuery x associação de eventos de clique nativo .

Testando no Chrome 22.0.1229.79 de 32 bits no Windows Server 2008 R2 / 7 de 64 bits

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

9
jQuery deve ser capaz de executar em muitos ambientes diferentes, o que torna mais robuts e é mais fácil de escrever, manter, mas se a velocidade é o mais importante, em seguida, jQuery não é a resposta
Coops

Tenha cuidado ao usar cada causa, pois nem todos os navegadores são compatíveis, acho que não para o IE, por exemplo. Talvez um polyfill seja útil.
Khaled_webdev 7/11

39

Pelo que entendi, sua pergunta não é realmente sobre o uso do jQuery ou não. É melhor: é melhor vincular eventos embutidos em HTML ou por meio de ouvintes de eventos?

A ligação embutida foi descontinuada. Além disso, dessa maneira, você pode vincular apenas uma função a um determinado evento.

Portanto, recomendo o uso de ouvintes de eventos. Dessa forma, você poderá vincular muitas funções a um único evento e desassociá-las posteriormente, se necessário. Considere este código JavaScript puro:

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

Isso funciona na maioria dos navegadores modernos.

No entanto, se você já inclui o jQuery em seu projeto - basta usar o jQuery: .onou a .clickfunção.


É possível registrar várias funções usando HTML embutido, como <div onclick = "handler1 (); handler2 (); handler3 ();"> </div>
Kira #

2
Dessa forma, você ainda está registrando apenas uma "expressão". Por exemplo, se handler1gera um erro handler2e handler3nunca será chamado. Além disso, você não pode adicionar e remover dinamicamente determinadas funções do ouvinte. E por último mas não menos importante, handler1, handler2e handler3têm de ser declaradas no escopo global, que é um cheiro.
Michał Miszczyszyn 14/03

Usar try..catchdentro das funções não funcionará quando estiver handler2indefinido. O JavaScript embutido da FYI obviamente não funciona quando o JS está desativado no navegador do usuário, por favor não desinforme os outros.
Michał Miszczyszyn 16/03/19

Mencionei que não tinha certeza sobre o JavaScript desativado. Não estou desinformar ou enganar os outros
Kira

Nesse caso, você pode tentar o seguinte <div onclick = "function () {try {handler1 (); handler2 (); handler3 ();} catch {}}"> </div>
Kira

15

Você pode combiná-los, use jQuery para vincular a função ao clique

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

14

$('#myDiv').clické melhor, porque separa o código JavaScript do HTML . É preciso tentar manter o comportamento e a estrutura da página diferentes . Isso ajuda muito.


2
Essa resposta faz sentido, pois as pessoas que projetam e escrevem coisas sobre js são diferentes na maioria dos casos. E é estranho aprovar isso depois de quase 4 anos desde que isso foi publicado!
LearningEveryday

14

Faça isso, pois ele fornecerá padrão e desempenho.

 $('#myDiv').click(function(){
      //Some code
 });

Como o segundo método é um simples código JavaScript e é mais rápido que o jQuery. Mas aqui o desempenho será aproximadamente o mesmo.


11

IMHO, onclick é o método preferido sobre .click somente quando as seguintes condições forem atendidas:

  • existem muitos elementos na página
  • somente um evento a ser registrado para o evento de clique
  • Você está preocupado com o desempenho móvel / duração da bateria

Formei essa opinião devido ao fato de que os mecanismos JavaScript em dispositivos móveis são 4 a 7 vezes mais lentos que seus equivalentes de desktop, fabricados na mesma geração. Odeio quando visito um site no meu dispositivo móvel e recebo rolagem instável porque o jQuery está vinculando todos os eventos às custas da minha experiência do usuário e da duração da bateria. Outro fator de suporte recente, embora isso deva ser apenas uma preocupação das agências governamentais;), tivemos o IE7 pop-up com uma caixa de mensagem informando que o processo JavaScript está demorando muito ... aguarde ou cancele o processo. Isso acontecia toda vez que havia muitos elementos aos quais vincular via jQuery.


10

Diferença nas obras. Se você usar click (), poderá adicionar várias funções, mas se usar um atributo, apenas uma função será executada - a última.

DEMO

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

Javascript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

Se estamos falando sobre desempenho, em qualquer caso, usar diretamente é sempre mais rápido, mas usar um atributo, você poderá atribuir apenas uma função.


Podemos executar mais de uma função usando atributos como $ ('# JQueryAttrClick'). Attr ('onClick', "alert ('2'); alert ('2'); alert ('3'); alert ('4')")
Kira

8

A separação de preocupações é fundamental aqui e, portanto, a associação de eventos é o método geralmente aceito. Isso é basicamente o que muitas das respostas existentes disseram.

No entanto , não jogue fora a idéia de marcação declarativa muito rapidamente. Ele tem seu lugar, e com estruturas como Angularjs, é a peça central.

É preciso entender que o todo <div id="myDiv" onClick="divFunction()">Some Content</div>foi tão envergonhado porque foi abusado por alguns desenvolvedores. Então, chegou a um ponto de proporções sacrílegas, muito parecido tables. Alguns desenvolvedores realmente evitar tablesde dados tabulares. É o exemplo perfeito de pessoas agindo sem entender.

Embora eu goste da ideia de manter meu comportamento separado dos meus pontos de vista. Não vejo nenhum problema com a marcação declarando o que faz (não como faz, isso é comportamento). Pode estar na forma de um atributo onClick real ou de um atributo personalizado, como os componentes javascript de autoinicialização.

Dessa forma, olhando apenas a marcação, você pode ver o que faz, em vez de tentar reverter os ligadores de eventos javascript de pesquisa.

Portanto, como uma terceira alternativa ao acima, usar atributos de dados para anunciar declarativamente o comportamento na marcação. O comportamento é mantido fora da vista, mas de relance você pode ver o que está acontecendo.

Exemplo de inicialização:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Fonte: http://getbootstrap.com/javascript/#popovers

Nota A principal desvantagem do segundo exemplo é a poluição do espaço para nome global. Isso pode ser contornado usando a terceira alternativa acima, ou estruturas como Angular e seus atributos ng-click com escopo automático.


4

Nenhum deles é melhor na medida em que pode ser usado para propósitos diferentes. onClick(realmente deveria ser onclick) tem um desempenho um pouco melhor, mas eu duvido que você notará uma diferença lá.

Vale a pena notar que eles fazem coisas diferentes: .clickpodem ser vinculados a qualquer coleção jQuery, ao passo onclickque devem ser usados ​​em linha nos elementos aos quais você deseja que ele seja vinculado. Você também pode vincular apenas um evento ao uso onclick, enquanto .clickpermite continuar a vincular eventos.

Na minha opinião, eu seria consistente com isso e apenas usaria em .clickqualquer lugar e manteria todo o meu código JavaScript juntos e separados do HTML.

Não use onclick. Não há motivo para usá-lo, a menos que você saiba o que está fazendo e provavelmente não.


2
Mesmo se "melhor" não é explicitamente definido, é quase nunca é uma boa idéia de colocar manipuladores de eventos em sua marcação directamente
Jay

@ Jayraj, quando eu disse na minha resposta que era uma boa idéia?
Pílulas de explosão

3
Ao dizer que .clicknão era melhor do que onclick("Nenhum dos dois é melhor "), estava implícito que isso onclické quase, ou tão bom, um modo de escrever código, quando na verdade .clické a melhor prática por uma milha. Desculpe, mas IMHO você deve reformular sua resposta
Jay

2
@ExplosionPills Gostaria de remover a parte da resposta que diz que nem é melhor. O parágrafo no final parece uma contradição.
Juan Mendes

4
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

eventos onclick, onmouseover, onmouseout etc. são realmente ruins para o desempenho ( principalmente no Internet Explorer , veja a figura). Se você codificar usando o Visual Studio , ao executar uma página com eles, cada um deles criará um bloco SCRIPT separado, ocupando memória e, assim, diminuindo o desempenho.

Sem mencionar que você deve ter uma separação de preocupações : JavaScript e layouts devem ser separados!

É sempre melhor criar evenHandlers para qualquer um desses eventos, um evento pode capturar centenas / milhares de itens, em vez de criar milhares de blocos de script separados para cada um!

(Além disso, tudo o que todo mundo está dizendo.)


3

Bem, uma das principais idéias por trás do jQuery é separar o JavaScript do código HTML desagradável . O primeiro método é o caminho a percorrer.


3

Na maioria das vezes, os métodos JavaScript nativos são uma escolha melhor do que o jQuery quando o desempenho é o único critério, mas o jQuery utiliza JavaScript e facilita o desenvolvimento. Você pode usar o jQuery, pois não prejudica muito o desempenho. No seu caso específico, a diferença de desempenho é ignorável.


2

O primeiro método de uso onclicknão é o jQuery, mas simplesmente o Javascript, para que você não obtenha a sobrecarga do jQuery. A maneira do jQuery pode ser expandida por meio de seletores, se você precisar adicioná-lo a outros elementos sem adicionar o manipulador de eventos a cada elemento, mas como você o possui agora, é apenas uma questão se você precisa usar o jQuery ou não.

Pessoalmente, já que você está usando o jQuery, eu o manteria por ser consistente e dissociar a marcação do script.


1
O exemplo do jQuery é praticamente a mesma coisa document.querySelector('#something').addEventListener(...ou semelhante no Javascript comum, então esse não é o ponto. Da mesma forma, você pode capturar eventos de bolhas de nós filhos em Javascript, não apenas com os atalhos do jQuery. O ponto principal é que esses eventos devem estar no controlador (arquivo de definições de comportamento javascript), e não na visualização (dispersa aqui e ali no html, exigindo funções de variável global ou, pior ainda, código embutido.)
NoBugs

2

O primeiro método é preferir. Ele usa os modelos avançados de registro de eventos , o que significa que você pode anexar vários manipuladores ao mesmo elemento. Você pode acessar facilmente o objeto de evento e o manipulador pode viver no escopo de qualquer função. Além disso, é dinâmico, ou seja, pode ser chamado a qualquer momento e é especialmente adequado para elementos gerados dinamicamente. Se você usa o jQuery, outra biblioteca ou os métodos nativos diretamente não importa.

O segundo método, usando atributos em linha, precisa de muitas funções globais (o que leva à poluição do espaço para nome) e combina o conteúdo / estrutura (HTML) com o comportamento (JavaScript). Não use isso.

Sua pergunta sobre desempenho ou padrões não pode ser facilmente respondida. Os dois métodos são completamente diferentes e fazem coisas diferentes. O primeiro é mais poderoso, enquanto o segundo é desprezado (considerado mau estilo).


1

Função Onclick Jquery

$('#selector').click(function(){ //Your Functionality });

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.