Diferença entre .on ('clique') vs .click ()
Respostas:
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");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')
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.
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().
selectorparâmetro. Se você ligar .on()sem um selectorparâmetro, não haverá melhoria no desempenho sobre o uso .click().
.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() { ... });.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.
.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.
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(){});.click().)
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 ().
.clickvs.on
.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).
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
})Agora, eles preteriram click (), então é melhor continuar com ('click')
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.
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.
$('.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:
