Diferença entre .on (‘clique’) vs .click ()

Existe alguma diferença entre o código a seguir?

$('#whatever').on('click', function() { /* your code here */ }); 

e

 $('#whatever').click(function() { /* your code here */ }); 

Eu acho que a diferença está nos padrões de uso.

Eu prefiro .click over .click porque o primeiro pode usar menos memory e trabalhar para elementos adicionados dinamicamente.

Considere o seguinte html:

   

onde adicionamos novos botões via

 $("button#add").click(function() { var html = ""; $("button.alert:last").parent().append(html); }); 

e quer “Alerta!” para mostrar um alerta. Podemos usar “click” ou “on” para isso.


Quando usamos click

 $("button.alert").click(function() { alert(1); }); 

Com o acima, um manipulador separado é criado para cada elemento que corresponda ao seletor. Que significa

  1. muitos elementos correspondentes criariam muitos manipuladores idênticos e, assim, aumentariam o tamanho da memory
  2. itens adicionados dinamicamente não terão o manipulador – ou seja, no html acima o recém-adicionado “Alerta!” os botões não funcionarão a menos que você religue o manipulador.

Quando usamos .on

 $("div#container").on('click', 'button.alert', function() { alert(1); }); 

Com o acima, um único manipulador para todos os elementos que correspondem ao seu seletor, incluindo aqueles criados dinamicamente.


… outro motivo para usar .on

Como Adrien comentou abaixo, outra razão para usar o .on é events de namespace.

Se você adicionar um manipulador com .on("click", handler) você normalmente o removerá com .off("click", handler) que removerá esse manipulador. Obviamente, isso funciona apenas se você tiver uma referência à function, e se você não fizer isso? Você usa namespaces:

 $("#element").on("click.someNamespace", function() { console.log("anonymous!"); }); 

com unbinding via

 $("#element").off("click.someNamespace"); 

Existe alguma diferença entre o código a seguir?

Não, não há diferença funcional entre os dois exemplos de código em sua pergunta. .click(fn) é um “método de atalho” para .on("click", fn) . Da documentação para .on() :

Existem methods abreviados para alguns events, como .click() que podem ser usados ​​para append ou acionar manipuladores de events. Para uma lista completa dos methods de taquigrafia, veja a categoria de events .

Observe que .on() difere de .click() em que ele tem a capacidade de criar manipuladores de events delegates, passando um parâmetro selector , enquanto .click() não. Quando .on() é chamado sem um parâmetro selector , ele se comporta exatamente da mesma forma que .click() . Se você deseja delegação de events, use .on() .

.on() é a maneira recomendada de fazer toda a binding do evento a partir do jQuery 1.7. Ele rola toda a funcionalidade de ambos .bind() e .live() em uma function que altera o comportamento conforme você passa diferentes parâmetros.

Como você escreveu seu exemplo, não há diferença entre os dois. Ambos vinculam um manipulador ao evento click de #whatever . on() oferece flexibilidade adicional ao permitir que você delegue events triggersdos por filhos de #whatever que #whatever que #whatever para uma única function de manipulador, se você escolher.

 // Bind to all links inside #whatever, even new ones created later. $('#whatever').on('click', 'a', function() { ... }); 

Como mencionado pelas outras respostas:

 $("#whatever").click(function(){ }); // is just a shortcut for $("#whatever").on("click", function(){ }) 

Observando que o .on() suporta várias outras combinações de parâmetros que o .click() não suporta, permitindo que ele manipule a delegação de events (superceding .delegate() e .live() ).

(E, obviamente, existem outros methods de atalho semelhantes para “chave”, “foco”, etc.)

A razão pela qual estou postando uma resposta extra é mencionar o que acontece se você chamar .click() sem parâmetros:

 $("#whatever").click(); // is a shortcut for $("#whatever").trigger("click"); 

Observando que se você usar o .trigger() diretamente, você também pode passar parâmetros extras ou um object de evento jQuery, o que você não pode fazer com o .click() .

Eu também queria mencionar que, se você olhar o código-fonte do jQuery (no jquery-1.7.1.js), verá que internamente a function .click() (ou .keyup() , etc.) irá realmente chamar .on() ou .trigger() . Obviamente, isso significa que você pode ter certeza de que eles realmente têm o mesmo resultado, mas também significa que usar .click() tem um pouco mais de sobrecarga – não é algo para se preocupar ou pensar na maioria das circunstâncias, mas teoricamente pode ser importante em circunstâncias extraordinárias.

EDIT: Finalmente, note que .on() permite ligar vários events para a mesma function em uma linha, por exemplo:

 $("#whatever").on("click keypress focus", function(){}); 

Não há.
O ponto de on() é suas outras sobrecargas e a capacidade de manipular events que não possuem methods de atalho.

Eles parecem ser os mesmos … Documentação da function click () :

Este método é um atalho para .bind (‘click’, handler)

Documentação da function on () :

A partir do jQuery 1.7, o método .on () fornece toda a funcionalidade necessária para append manipuladores de events. Para obter ajuda na conversão de methods de events jQuery mais antigos, consulte .bind (), .delegate () e .live (). Para remover events associados a .on (), consulte .off ().

.click events .click só funcionam quando o elemento é renderizado e são anexados somente a elementos carregados quando o DOM está pronto.

.on events .on são dinamicamente anexados a elementos DOM, o que é útil quando você deseja append um evento a elementos DOM que são renderizados em uma solicitação ajax ou outra coisa (depois que o DOM estiver pronto).

Aqui você obterá uma lista de diferentes maneiras de aplicar o evento click. Você pode selecionar de acordo com a sua conveniência ou se você clicar não está funcionando, basta tentar uma alternativa a partir deles.

 $('.clickHere').click(function(){ // this is flat click. this event will be attatched //to element if element is available in //dom at the time when JS loaded. // do your stuff }); $('.clickHere').on('click', function(){ // same as first one // do your stuff }) $(document).on('click', '.clickHere', function(){ // this is diffrent type // of click. The click will be registered on document when JS // loaded and will delegate to the '.clickHere ' element. This is // called event delegation // do your stuff }); $('body').on('click', '.clickHere', function(){ // This is same as 3rd // point. Here we used body instead of document/ // do your stuff }); $('.clickHere').off().on('click', function(){ // // deregister event listener if any and register the event again. This // prevents the duplicate event resistration on same element. // do your stuff }) 

Tanto quanto se sabe da internet e alguns amigos .on () é usado quando você adiciona dinamicamente elementos. Mas quando eu usei em uma página de login simples, onde o evento click deveria enviar o AJAX para node.js e no retorno acrescentar novos elementos, ele começou a chamar chamadas multi-AJAX. Quando eu mudei para click () tudo deu certo. Na verdade eu não enfrentei esse problema antes.

$ (‘. UPDATE’). Clique (function () {}); V / S $ (documento) .on (‘clique’, ‘. UPDATE’, function () {});

[digite a descrição da imagem aqui] [10]