Diferença entre as funções jQuery `click`,` bind`, `live`,` delegate`, `trigger` e` on` (com um exemplo)?

Eu li a documentação de cada função jQuery official website, mas não há tais listagens de comparação entre as funções abaixo:

$().click(fn)
$().bind('click',fn)
$().live('click',fn)
$().delegate(selector, 'click', fn)
$().trigger('click') // UPDATED
$().on('click', selector ,fn); // more UPDATED

Por favor, evite qualquer link de referência.

Como todas as funções acima funcionam exatamente e quais devem ser preferidas em qual situação?

Nota: Se houver outras funções com a mesma funcionalidade ou mecanismo, por favor, elabore.

Atualizar

Eu também vi uma $.triggerfunção. Funciona de maneira semelhante às funções acima?

Mais atualização

Agora .oné adicionado na v1.7 e acho que este, de alguma forma, cobre todos os requisitos de funções acima juntos.

Antes de ler isso, puxe esta lista de eventos para outra página, a própria API é tremendamente útil e tudo o que estou discutindo abaixo está vinculado diretamente a esta página .

Primeiro, .click(function)é literalmente um atalho para .bind('click', function), eles são equivalentes. Use-os ao vincular um manipulador diretamente a um elemento , assim:

$(document).click(function() {
  alert("You clicked somewhere in the page, it bubbled to document");
});

Se esse elemento for substituído ou jogado fora, esse manipulador não estará mais lá. Também os elementos que não estavam presentes quando esse código foi executado para anexar o manipulador (por exemplo, o seletor o encontrou) não receberão o manipulador.

.live()e .delegate()são parecidos, .delegate()na verdade usam .live()internamente; ambos escutam os eventos borbulharem. Isso funciona para elementos novos e antigos , eles exibem eventos da mesma maneira. Você os usa quando seus elementos podem mudar, por exemplo, adicionando novas linhas, itens de lista, etc. Se você não possui um ancestral pai / comum que permanecerá na página e não será substituído a qualquer momento, use o .live()seguinte:

$(".clickAlert").live('click', function() {
  alert("A click happened");
});

Se, no entanto, você tiver um elemento pai em algum lugar que não está sendo substituído (para que seus manipuladores de eventos não estejam se despedindo), você deve lidar com .delegate()isso da seguinte maneira:

$("#commonParent").delegate('.clickAlert', 'click', function() {
  alert("A click happened, it was captured at #commonParent and this alert ran");
});

Isso funciona quase da mesma forma que .live(), mas o evento borbulha menos vezes antes de ser capturado e os manipuladores executados. Outro uso comum de ambos é dizer que sua classe é alterada em um elemento, não correspondendo mais ao seletor usado originalmente ... com esses métodos, o seletor é avaliado no momento do evento , se corresponder, o manipulador será executado. .são o elemento que não corresponde mais ao seletor importa, ele não será mais executado. No .click()entanto, o manipulador de eventos é vinculado diretamente ao elemento DOM, o fato de não corresponder a qualquer seletor usado para encontrá-lo é irrelevante ... o evento é vinculado e permanece até o elemento desaparecer, ou o manipulador é removido via .unbind().

Outro uso comum para .live()e .delegate()é o desempenho . Se você estiver lidando com muitos elementos, anexar um manipulador de cliques diretamente a cada elemento é caro e demorado. Nesses casos, é mais econômico configurar um único manipulador e deixar que o bubbling faça o trabalho, dê uma olhada nesta pergunta em que fez uma enorme diferença , é um bom exemplo da aplicação.

Disparo - para a pergunta atualizada

Existem duas funções principais de acionador de manipulador de eventos disponíveis, elas se enquadram na mesma categoria "Anexo de manipulador de eventos" na API , são .trigger()e .triggerHandler(). .trigger('eventName')possui alguns atalhos internos para os eventos comuns, por exemplo:

$().click(fn); //binds an event handler to the click event
$().click();   //fires all click event handlers for this element, in order bound

Você pode ver uma lista incluindo esses atalhos aqui .

Quanto à diferença, .trigger()aciona o manipulador de eventos (mas não a ação padrão na maioria das vezes, por exemplo, colocando o cursor no ponto certo em um clique <textarea>). Isso faz com que os manipuladores de eventos ocorram na ordem em que foram vinculados (como seria o evento nativo), aciona as ações do evento nativo e borbulha o DOM.

.triggerHandler()geralmente é para um propósito diferente, aqui você está apenas tentando disparar o (s) manipulador (es) vinculado (s), não causa o disparo do evento nativo, por exemplo, enviando um formulário. Ele não faz bolhas no DOM e não pode ser encadeado (ele retorna o que o último manipulador de eventos associado a esse evento retornar). Por exemplo, se você deseja acionar um focusevento, mas não focar o objeto, apenas deseja .focus(fn)executar o código vinculado , isso faria isso, enquanto o .trigger()faria, além de focar o elemento e fazer bolhas.

Aqui está um exemplo do mundo real:

$("form").submit(); //actually calling `.trigger('submit');`

Isso executaria quaisquer manipuladores de envio, por exemplo, o plug-in de validação do jQuery e tentaria enviar o <form>. No entanto, se você apenas deseja validar, uma vez que é conectado por meio de um submitmanipulador de eventos, mas não o envia <form>posteriormente, você pode usar o .triggerHandler('submit')seguinte:

$("form").triggerHandler('submit');

O plug-in impede que o manipulador envie o formulário bombardeando se a verificação de validação não for aprovada, mas com esse método não nos importamos com o que faz. Independentemente de ter sido anulado ou não, não estamos tentando enviar o formulário, só queremos acioná-lo para re-validar e não fazer mais nada. ( Isenção de responsabilidade: este é um exemplo supérfluo, pois existe um .validate()método no plug-in, mas é uma ilustração decente da intenção)

Os dois primeiros são equivalentes.

// The following two statements do the same thing:
$("blah").click( function() { alert( "Click!" ); } );
$("blah").bind( "click", function() { alert( "Click!" ); } ); 

O segundo, no entanto, pode ser usado para vincular a mais de um evento ao mesmo tempo, especificando vários nomes de eventos separados por espaço:

$("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } ); 

O .livemétodo é mais interessante. Considere o seguinte exemplo:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").click( function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

Após a execução da segunda linha do script, o segundo link também terá uma classe CSS de "myLink". Mas ele não terá o manipulador de eventos, porque não tinha a classe quando o evento foi anexado.

Agora, considere que você deseja que seja o contrário: sempre que um link com a classe "myLink" aparecer em algum lugar da página, você deseja que ele tenha o mesmo manipulador de eventos automaticamente. Isso é muito comum quando você tem algum tipo de lista ou tabela, na qual adiciona linhas ou células dinamicamente, mas deseja que todas elas se comportem da mesma maneira. Em vez de se esforçar para atribuir manipuladores de eventos novamente, você pode usar o .livemétodo:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").live( "click", function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

Neste exemplo, o segundo link também obterá o manipulador de eventos assim que receber a classe "myLink". Magia! :-)

Claro, não é tão literal. o que.live realmente faz é anexar o manipulador não ao elemento especificado em si, mas à própria raiz da árvore HTML (o elemento "body"). Eventos em DHTML têm esse recurso engraçado de "borbulhar". Considere isto:

<div> <a> <b>text</b> </a> </div>

Se você clicar em "texto", primeiro o elemento <b> receberá um evento "clique". Depois disso, o elemento <a> receberá um evento "click". E depois disso, o elemento <div> receberá um evento "click". E assim por diante - até o elemento <body>. E é aí que o jQuery captura o evento e verifica se existem manipuladores "ativos" que se aplicam ao elemento que causou o evento em primeiro lugar. Arrumado!

E, finalmente, o .delegatemétodo. Ele simplesmente pega todos os filhos do seu elemento que estão em conformidade com o seletor fornecido e anexa um manipulador "ativo" a eles. Dê uma olhada:

$("table").delegate( "td", "click", function() { alert( "Click!" ); } );

// Is equivalent to:
$("table").each( function() {
    $(this).find( "td" ).live( "click", function() { alert( "Click!" ); } );
} );

Questões?

A partir do jQuery 1.7, o método .live () foi preterido. Se você estiver usando uma versão do jQuery <1.7, é recomendável usar oficialmente .delegate () sobre .live ().

.live () agora foi substituído por .on ().

É melhor ir diretamente ao site jQuery para obter mais informações, mas aqui estão as versões atuais do método .on ():

.on( events [, selector] [, data], handler(eventObject) )
.on( events-map [, selector] [, data] )

http://api.jquery.com/on/

$().click(fn)e $().bind('click', fn)são idênticos à primeira vista, mas a $.bindversão é mais poderosa por dois motivos:

1. $().bind()permite atribuir um manipulador a vários eventos, por exemplo $().bind('click keyup', fn),.
2. $().bind()suporta eventos com espaço para nome - um recurso poderoso se você deseja remover (desvincular) apenas determinados manipuladores de eventos aos quais um elemento está vinculado - leia mais em Eventos com espaço para nome .

Live vs delegate: isso já foi respondido nas outras respostas.

É aqui que a leitura da API pode ajudar. No entanto, eu sei do alto da minha cabeça, para que você possa continuar sendo preguiçoso (yay!).

$('#something').click(fn);
$('#something').bind('click',fn);

Não há diferença aqui (que eu saiba). .clické simplesmente um método de conveniência / auxiliar para.bind('click'

// even after this is called, all <a>s in
// <div class="dynamic_els"> will continue
// to be assigned these event handlers

$('div.dynamic_els a').live(‘click’,fn);

Isso é muito diferente, pois .liveadiciona eventos ao seletor que você passa (o que você não tem aqui) e continua a olhar para o DOM conforme os nós são inseridos / removidos

$('#some_element').delegate('td','click',fn);

Isso é diferente apenas pela maneira como você está atribuindo manipuladores de eventos. .delegateestá centralizado no evento DOM borbulhante. O princípio básico é que todo evento borbulha para cima através da árvore do DOM até atingir o elemento raiz ( documentou windowou <html>ou <body>, não me lembro exatamente).

De qualquer forma, você está vinculando um onclickmanipulador a todos os <td>s dentro $('#some_element')(você deve especificar um seletor, embora possa dizer $(document)). Quando um de seus filhos é clicado, o evento borbulha até o <td>. Você pode extrair o elemento de origem do evento (o que o jQuery faz por você automaticamente).

Isso é útil quando existem muitos elementos e você tem apenas alguns pontos (ou um ponto central) pelos quais esses eventos serão submetidos. Isso economiza o esforço e a memória do navegador para consolidar esses manipuladores de eventos em menos objetos.