jQuery.click () vs onClick

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?

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

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

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.

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
}

$('#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.

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.

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.

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.

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.

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.

<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.)

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.

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.

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.

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).

Função Onclick Jquery

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