Diferença entre .on ('clique') vs .click ()

526

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

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

e

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

jquery click bgcode
fonte

762

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

Eu preferiria .onmais .clickporque o primeiro pode usar menos memória e trabalho para elementos adicionados dinamicamente.

Considere o seguinte html:

<html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

onde adicionamos novos botões via

$("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

e quer "Alerta!" para mostrar um alerta. Podemos usar "clicar" ou "ativar" para isso.

Quando usamos `click`

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

com o exposto acima, um manipulador separado é criado para cada elemento que corresponde ao seletor. Que significa

muitos elementos correspondentes criariam muitos manipuladores idênticos e, assim, aumentariam a pegada de memória
itens adicionados dinamicamente não terão o manipulador - ou seja, no html acima, o recém-adicionado "Alert!" 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 exposto, um único manipulador para todos os elementos que correspondem ao seu seletor, incluindo os criados dinamicamente.

... outro motivo para usar `.on`

Como Adrien comentou abaixo, outro motivo para usar .onsão os eventos no espaço de nomes.

Se você adicionar um manipulador .on("click", handler)normalmente, remova-o com o .off("click", handler)qual removerá esse manipulador. Obviamente, isso funciona apenas se você tiver uma referência à função, e daí se não tiver? Você usa namespaces:

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

com desenrolamento via

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

andreister
fonte

2

Que tal: $ ('button.alert'). On ('clique', function () {alert (1);}); ?

Matthew

8

@andreister: corrija-me se estiver errado, mas acredito que outra vantagem é o uso de namespaces ao usar on('click' ...), consulte stackoverflow.com/a/3973060/759452, ie. on('click.darkenallothersections' ...)e ao mesmo tempo on('click.displaynextstep' ...), então, posso desvincular apenas o que eu escolher usando.unbind('click.displaynextstep')

Adrien Seja

Eu não acho que um manipulador separado seja criado para cada elemento que corresponda ao seletor. Eu acho que um manipulador seria criado, mas que a sobrecarga vem da ligação desse manipulador a vários elementos e do monitoramento de todos esses elementos. Pelo menos, não encontrei isso na documentação.

11746 Trace

7

Alguém pode explicar por que .on pode trabalhar com itens adicionados dinamicamente, mas .click não pode?

MengT

2

on()é a tendência no jQuery. Eu tinha de atualização $(window).load(function() {});para $(window).on("load", function (e) {})quando eu atualizado para jQuery 3.

Victor Stoddard

37

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 na sua pergunta. .click(fn)é um "método de atalho" para .on("click", fn). A partir da documentação para.on() :

Existem métodos abreviados para alguns eventos, como os .click()que podem ser usados para anexar ou disparar manipuladores de eventos. Para obter uma lista completa dos métodos abreviados, consulte a categoria de eventos .

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

gilly3
fonte

4

e o problema de desempenho apontado para o meu @andreister?

rubo77

@ rubo77 insignificante na melhor das hipóteses. Estamos levando milissegundos de figura única.

Rory McCrossan 23/03

1

@RoryMcCrossan isso é muito importante para mim - estou procurando isso porque tenho até 3000 perguntas em uma página que precisa de eventos. Um milissegundo faz com que minha página demore mais três segundos para ser executada. Seu comentário não é útil para grandes listas.

Randy

11

A questão maior é por que você tem 3000 perguntas em uma página. Se você seguir bons padrões de interface do usuário, nunca deverá ter tanta informação em uma página. Procure paginação ou carregamento lento. Mesmo usando a delegação de eventos para ter um único manipulador de eventos para todos esses elementos, seria melhor.

Rory McCrossan

5

@ rubo77 - O ganho de desempenho é visto apenas ao usar a delegação de eventos passando um selectorparâmetro. Se você ligar .on()sem um selectorparâmetro, não haverá melhoria no desempenho sobre o uso .click().

gilly3

23

.on()é a maneira recomendada de fazer toda a associação de eventos a partir do jQuery 1.7. Ele rola toda a funcionalidade de ambos .bind()e .live()em uma função que altera o comportamento à medida que você passa parâmetros diferentes.

Como você escreveu seu exemplo, não há diferença entre os dois. Ambos vinculam um manipulador ao clickevento de #whatever. on()oferece flexibilidade adicional para permitir a delegação de eventos acionados por filhos #whateverpara uma única função de manipulador, se você escolher.

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

Interrobang
fonte

"Vincule a todos os links dentro de #quer que seja, até os novos criados mais tarde." Não é exatamente isso que .live()faz? Além disso, isso parece contradizer as outras respostas que dizem que ele tem apenas a funcionalidade de .click()e, portanto, não se aplica a eventos futuros.

precisa saber é

3

@babonk - Isso não contradiz as outras respostas, porque, como o Interrobang disse no primeiro parágrafo, .on()pode fazer o que .click()faz e fazer o que .bind()e .live()faz - depende de quais parâmetros você chama. (Algumas outras respostas mencionaram isso também.) Observe que "Vincular a todos os links dentro de # qualquer que seja" não é o que .live()faz, é o que .delegate()faz. .live()vincula a todos dentro, em documentvez de permitir que você especifique o contêiner. A nota também .live()está obsoleta do jQuery 1.7 em diante.

Nnnnnn

+1 para eventos delegados: "Ao escolher um elemento que é garantido que está presente no momento em que o manipulador de eventos delegados é anexado, você pode usar eventos delegados para evitar a necessidade de anexar e remover frequentemente os manipuladores de eventos". api.jquery.com/on

jimasp 23/05

19

Conforme mencionado pelas outras respostas:

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

Observando, porém, que .on()suporta várias outras combinações de parâmetros que .click()não, permitindo que ele lide com a delegação de eventos (substituindo .delegate()e .live()).

(E, obviamente, existem outros métodos de atalho semelhantes para "keyup", "focus" etc.)

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

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

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

Eu também queria mencionar que, se você olhar o código-fonte do jQuery (em jquery-1.7.1.js), verá que internamente a função .click()(ou .keyup()etc.) 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 o uso .click()tem um pouco mais de sobrecarga - não há nada com o que se preocupar ou pensar na maioria das circunstâncias, mas teoricamente isso pode ser importante em circunstâncias extraordinárias.

EDIT: Finalmente, observe que .on()permite vincular vários eventos à mesma função em uma linha, por exemplo:

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

nnnnnn
fonte

Os métodos não estão carregados na memória para uso? Então isso não importa? E para facilitar a leitura, talvez seja mais prático?

Vince V.

@VinceV. - Sim. Para manipuladores de eventos não delegados "padrão", ambos os métodos fazem a mesma coisa e a diferença de desempenho é insignificante, portanto, qual método você usa é realmente uma questão de preferência pessoal. (Eu normalmente escolher .click().)

nnnnnn

9

Não, não existe.
O ponto principal on()é suas outras sobrecargas e a capacidade de manipular eventos que não possuem métodos de atalho.

SLaks
fonte

1

@arigold: Essas são as outras sobrecargas.

SLaks

9

Eles parecem ser os mesmos ... Documentação da função click () :

Este método é um atalho para .bind ('click', manipulador)

Documentação da função on () :

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

dana
fonte

Ambos os seus pontos de vista devem ser mesclados. Click () é um atalho para .Bind () e .On () ... Conforme o JQUERY 1.7.0 +, também é um atalho para o Trigger ('clique'). [ api.jquery.com/click/]

Dhanasekar 20/09/12

Esta é uma explicação bastante simples a partir dos documentos, mas a seguir resposta tem um bom exemplo de por que um é melhor que o outro em .clickvs.on

phatskat

@phatskat - Acontece que eu concordo com você :)

dana

8

.click eventos funcionam apenas quando o elemento é renderizado e são anexados apenas aos elementos carregados quando o DOM está pronto.

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

Ramesh kumar
fonte

5

Aqui você obterá uma lista de diferentes maneiras de aplicar o evento click. Você pode selecionar de acordo com sua qualidade ou, se o seu clique não estiver funcionando, tente uma alternativa.

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

Mustkeem K
fonte

3

Agora, eles preteriram click (), então é melhor continuar com ('click')

tw0shoes
fonte

Então, o que você faz se deseja o antigo comportamento click () agora?

precisa saber é

1

No que diz respeito à Internet e a alguns amigos, o .on () é usado quando você adiciona elementos dinamicamente. Mas quando eu o usei em uma página de login simples, onde o evento click deve enviar o AJAX para o node.js e, ao retornar, acrescentar novos elementos, ele começou a chamar chamadas multi-AJAX. Quando mudei para click () tudo deu certo. Na verdade, eu não enfrentei esse problema antes.

Alper Bilgil
fonte

0

NOVOS ELEMENTOS

Como um adendo às respostas abrangentes acima, para destacar pontos críticos, se você quiser que o clique seja anexado a novos elementos:

elementos selecionados pelo primeiro seletor, por exemplo, $ ("body") devem existir no momento em que a declaração é feita, caso contrário não há nada a que anexar.
você deve usar os três argumentos na função .on (), incluindo o seletor válido para seus elementos de destino como o segundo argumento.

Astra Bear
fonte

-1

$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });

é mais eficaz que $ ('. UPDATE'). click (function () {});
ele pode usar menos memória e trabalhar para elementos adicionados dinamicamente.
por algum tempo, os dados buscados dinamicamente com o botão editar e excluir não geram eventos JQuery no momento da edição ou exclusão de dados dos dados da linha no formulário; esse tempo $(document).on('click','.UPDATE',function(){ });funciona efetivamente como os mesmos dados buscados usando o jquery. botão não funciona no momento da atualização ou exclusão:

Devang Hire
fonte

$ (document) .on ('clique', '. UPDATE', function () {}); 1) é mais eficaz que $ ('. UPDATE'). Click (function () {}); 2) pode usar menos memória e trabalhar para elementos adicionados dinamicamente. 3) algum tempo em que os dados buscados dinâmicos com o botão editar e excluir não geram eventos JQuery no momento da edição ou exclusão de dados dos dados da linha no formulário, naquele momento $ (document) .on ('click', '. UPDATE', function () {}); é efetivamente trabalho. [como os mesmos dados buscados usando jquery. botão não está funcionando no momento da atualização ou exclusão #

Devang Hire

Diferença entre .on ('clique') vs .click ()

Respostas:

Quando usamos click

Quando usamos .on

... outro motivo para usar .on

Quando usamos `click`

Quando usamos `.on`

... outro motivo para usar `.on`