Forum.clique () vs onClick
eu tenho uma enorme aplicação jQuery, e estou usando os dois métodos abaixo para clicar em eventos.
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
}
Uso o primeiro ou o segundo método na minha aplicação. Qual é melhor? Melhor para o desempenho? E o standard?
16 answers
Usar $('#myDiv').click(function(){
é Melhor como segue o modelo padrão de registo de eventos. (jQuery internamente usa addEventListener
e attachEvent
).
Basicamente registar um acontecimento à maneira modernaé a forma discreta de lidar com os acontecimentos. Também para registrar mais de um ouvinte de eventos para o alvo você pode chamar addEventListener()
para o mesmo alvo.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
Mais informações sobre o registo moderno de eventos - > http://www.quirksmode.org/js/events_advanced.htmlPorquê utilizar addEventListener? (de MDN)
O AddEventListener é a forma de registar um ouvinte de eventos conforme especificado em W3C DOM. Os seus benefícios são os seguintes:
- permite adicionar mais do que um manipulador para um evento. Isto é particularmente útil para bibliotecas DHTML ou extensões Mozilla que precisa trabalhar bem, mesmo que outras bibliotecas/extensões sejam usadas.
Dá-lhe um controlo mais fino da fase em que o ouvinte é activado. vs. bubbling)- Funciona em qualquer elemento DOM, não apenas em elementos 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 velhos e podem ser escritos facilmente.
atributo HTML deve ser evitada como faz a marcação maior e menos legível. Preocupações de conteúdo / estrutura e comportamento não estão bem separados, tornando um bug mais difícil de encontrar.
O problema com o propriedades do elemento DOM o método é que apenas um manipulador de eventos Pode ser ligado a um elemento por evento.
Mais informações sobre a manipulação tradicional de eventos - > http://www.quirksmode.org/js/events_tradmod.html
Referência MDN: https://developer.mozilla.org/en-US/docs/DOM/event
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.
Por isso, recomendo a utilização de ouvintes de eventos. Desta forma, você será capaz de ligar muitas funções a um único evento e separá-las mais tarde, se necessário. Considere este JavaScript puro código:querySelector('#myDiv').addEventListener('click', function () {
// Some code...
});
Isto funciona na maioria dos navegadores modernos.
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.
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!
É sempre melhor criar evenHandlers para qualquer um destes eventos, um evento pode capturar centenas/milhares de itens, em vez de criar milhares de blocos de script separados para cada um! (Também, tudo o que todos dizem.)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.
A 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).Execute um JavaScript quando carregar num botão:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>