jQuery: $ (). click (fn) vs. $ (). bind ('click', fn);

115

Ao usar jQuery para conectar um manipulador de eventos, há alguma diferença entre usar o método click

$().click(fn)

versus usar o método de ligação

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

Diferente do parâmetro de dados opcional de bind.

Alan Storm
fonte
Parece que click também tem o parâmetro opcional de dados. Alguém sabe se existe alguma diferença entre como funciona? Fonte: api.jquery.com/click
Nick Udell

Respostas:

137

Por que vale a pena, da fonte jQuery :

jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
    "mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave," +
    "change,select,submit,keydown,keypress,keyup,error").split(","), function(i, name){

    // Handle event binding
    jQuery.fn[name] = function(fn){
        return fn ? this.bind(name, fn) : this.trigger(name);
    };
});

Então não, não há diferença -

$().click(fn)

chamadas

$().bind('click',fn)
Matthew Maravillas
fonte
6
Verdadeiro - click()é basicamente uma abreviação para bind('click')(ou, nos dias de hoje, ele realmente chama on('click'). A meu ver, você também pode economizar aquela chamada de função extra usando on('click')diretamente.
Nix
Eles fazem o mesmo, mas bind (), digamos, eu quero que algo aconteça quando o uso pairar E clicar, etc. Consulte stackoverflow.com/a/519455/292408 abaixo para ver o exemplo. É claro que você só pode vincular a um evento, por exemplo, 'clicar' também.
Elijah Lynn
98

+1 para a resposta de Matthew, mas acho que deveria mencionar que você também pode vincular mais de um manipulador de eventos de uma vez usando bind

$('#myDiv').bind('mouseover focus', function() {
    $(this).addClass('focus')
});

que é muito mais limpo equivalente a:

var myFunc = function() {
    $(this).addClass('focus');
};
$('#myDiv')
    .mouseover(myFunc)
    .focus(myFunc)
;
nickf
fonte
20
+1 Que vincular vários eventos é novidade para mim e possivelmente muito útil.
cletus
7

Há uma diferença em que você pode vincular eventos personalizados usando o segundo formulário que você tem. Caso contrário, eles parecem ser sinônimos. Veja: jQuery Event Docs

Nickohrn
fonte
1

Existe o parâmetro [data] de ligação que ocorrerá apenas no tempo de ligação, uma vez.

Você também pode especificar eventos personalizados como o primeiro parâmetro de ligação.

Aaron
fonte
1

Acho que .click () é muito mais lógico, mas acho que é como você pensa as coisas.

$('#my_button').click(function() { alert('BOOM!'); });

Parece ser o mais simples possível.

JedH
fonte
0

Se você tem o Google Chrome, suas ferramentas de desenvolvedor têm uma ferramenta de escuta de eventos, selecione o elemento que deseja espionar seu evento.

Você descobrirá que tentar as duas maneiras leva ao mesmo resultado, portanto, elas são equivalentes.

Omar Abid
fonte
0

Eu prefiro .bind () por causa de sua consistência de interface com .live () . Isso não apenas torna o código mais legível, mas torna mais fácil alterar uma linha de código para usar um método em vez de outro.

danorton
fonte