Forum.clique () vs onClick

Para melhor desempenho, use o JavaScript nativo. Para um desenvolvimento mais rápido, use jQuery. Verificar a comparação de desempenho em jQuery vs desempenho de elementos nativos.

Fiz um teste no Firefox 16.0 32-bit no Windows Server 2008 R2 / 7 64-bit

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

Para eventos de clique, verifique Navegador Nativo eventos vs jquery gatilho ou jQuery vs Nativo Clique em Ligação de Evento.

Teste em cromado 22.0.1229.79 32 bits on Windows Server 2008 R2 / 7 64-bit

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

A ligação em linha está desactualizada. Além disso, desta forma você só pode ligar uma função a um determinado evento.

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

No entanto, se já incluir o jQuery no seu projecto - use apenas a função jQuery: .on ou .click.

$('#myDiv').click is better, because it separates JavaScript code from HTML . Deve-se tentar manter a Página comportamento e estrutura diferentes. Isto ajuda muito.

Pode combiná-las, usar o jQuery para ligar a função ao botão

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

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

function divFunction(){
 //some code
}

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

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

• há muitos elementos na página
• apenas um evento a ser registado para o evento click
• estás preocupado com o desempenho móvel/vida útil da bateria

Eu formei esta opinião por causa do fato de que os motores JavaScript em dispositivos móveis são 4 a 7 vezes mais lentos do que seus homólogos de desktop que foram feitos na mesma geração. Detesto. quando eu visito um site no meu dispositivo móvel e receber deslocamento nervoso porque o jQuery está ligando todos os eventos à custa da minha experiência de usuário e vida útil da bateria. Outro fator de apoio recente, embora isso deva ser apenas uma preocupação com as agências governamentais;), tivemos IE7 pop-up com uma caixa de mensagens afirmando que o processo JavaScript está demorando muito...esperar ou cancelar o processo. Isto acontecia sempre que havia muitos elementos para ligar-se à via jQuery.

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

DEMONSTRAÇÃO

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 a falar de desempenho, em qualquer caso o uso directo é sempre mais rápido, mas o uso de um atributo, você será capaz de atribuir apenas uma função.

A separação de preocupações é fundamental aqui, e por isso a ligação de Eventos é o método geralmente aceite. Isto é basicamente o que muitas das respostas existentes têm dito.

No entanto Não desperdice a idéia de marcação declarativa muito rapidamente. Tem o seu lugar, e com estruturas como Angularjs, é a peça central.

Tem de haver um entendimento de que todo <div id="myDiv" onClick="divFunction()">Some Content</div> foi tão envergonhado porque foi abusado por alguns programadores. Por isso chegou ao ponto de proporções sacrílegas, como tables. Alguns programadores na verdade evitam tables para dados tabulares. É o exemplo perfeito de pessoas que agem sem compreender.

Desta forma, olhando apenas para a marca, você pode ver o que é faz, em vez de tentar reverter busca javascript classificadores de eventos.

Então, como uma terceira alternativa para o acima, usando atributos de dados para anunciar declarativamente o comportamento dentro da marcação. O comportamento é mantido fora da vista, mas de repente você pode ver o que está acontecendo.

Bootstrap exemplo:

<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 com o segundo exemplo é a poluição do espaço de nomes global. Isto pode ser contornado usando a terceira alternativa acima, ou frameworks como Angular e seus atributos ng-click com escopo automático.

Nenhum deles é melhor na medida em que podem ser usados para fins diferentes. {[[0]} (deve realmente ser onclick) tem um desempenho muito ligeiramente melhor, mas duvido muito que você vai notar uma diferença lá.

Vale a pena notar que eles fazem coisas diferentes: {[[2]} pode estar ligado a qualquer colecção de jQuery, enquanto onclick tem de ser usado em linha com os elementos a que quer que esteja ligado. Você também pode associar apenas um evento ao uso de onclick, enquanto .click permite-lhe continuar a ligar evento.

Na minha opinião, eu seria consistente sobre isso e apenas usar {[[2]} em todos os lugares e manter Todos do meu código JavaScript juntos e separados do HTML.

Não utilize onclick. Não há razão para usá-lo, a não ser que saibas o que estás a fazer, e provavelmente não sabes.

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

Onclick, onmouseover, onmouseout, etc. os eventos são realmente maus para o desempenho {[[4]} (em Internet Explorer principalmente, go figure). Se você codifica usando Visual Studio , quando você executa uma página com estes, cada um deles irá criar um bloco de SCRIPT separado, tomando a memória, e, assim, desacelerando o desempenho.

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

Bem, uma das principais ideias por trás de jQuery é separar o JavaScript do Código nasty HTML . O primeiro método é o caminho a seguir.

Na maioria das vezes, os métodos JavaScript nativos são uma melhor escolha sobre jQuery quando o desempenho é o único critério, mas jQuery faz uso de JavaScript e torna o desenvolvimento fácil. Você pode usar jQuery como ele não degradar o desempenho muito. No seu caso específico, a diferença de desempenho é ignorável.

O primeiro método de usar onclick não é jQuery, mas simplesmente Javascript, por isso você não tem a sobrecarga de jQuery. A maneira jQuery pode expandir-se através de selectores se você precisar adicioná-lo a outros elementos sem adicionar o manipulador de eventos a cada elemento, mas como você tem agora é apenas uma questão se você precisa usar jQuery ou não.

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

O segundo o método, usando atributos inline, precisa de um monte de funções globais (que leva à poluição do espaço de nomes) e mistura o conteúdo/estrutura (HTML) com o comportamento (JavaScript). Não uses isso.

Execute um JavaScript quando carregar num botão:

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>