jQuery a diferença entre bind, live, delegate, on

A biblioteca jQuery permite registrar eventos utilizando os seguintes métodos: bind, live, delegate, on. Você sabe quando e onde utilizar? Conhece a diferença entre eles?

Se ainda, não conhece sugerimos a leitura deste artigo.

BIND

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// Attach a handler to an event for the elements.
.bind( eventType [, eventData ], handler(eventObject) )
.bind( eventType [, eventData ], preventBubble )
.bind( events )

// ----------------------------------------------
// Exemplo:

jQuery('#botao').bind('click' function() {
    // faz alguma coisa...
});

Registra os eventos nos elementos selecionados pela biblioteca jQuery. Permite registrar apenas os elementos que se encontram no DOM inicialmente, ou seja, se você cria elementos usando javascript, ajax.. o bind não irá funcionar.

Veja o que diz a documentação oficial do jQuery sobre o bind.

LIVE

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// Attach an event handler for all elements which match
// the current selector, now and in the future.

.live( events, handler(eventObject) )
.live( events, data, handler(eventObject) )
.live( events )

// ----------------------------------------------
// Exemplo:

jQuery('#botao').live('click' function() {
    // faz alguma coisa...
});

Registra os eventos nos elementos selecionados pela biblioteca jQuery, diferentemente do bind (citado acima), o live permite registrar eventos para os elementos que serão carregados através de ajax ou javascript. O negativo dessa abordagem é o desempenho, este método está deprecado e seu uso não é aconselhado pela documentação.

Veja o que diz a documentação oficial do jQuery sobre o live.

DELEGATE

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// Attach a handler to one or more events for all elements
// that match the selector, now or in the future, based on
// a specific set of root elements.

.delegate( selector, eventType, handler(eventObject) )
.delegate( selector, eventType, eventData, handler(eventObject) )
.delegate( selector, events )

// ----------------------------------------------
// Exemplo:

jQuery('#botao').delegate('a', 'click' function() {
    // faz alguma coisa...
});

O método delegate é semelhante ao live (citado acima), pois os elementos que são criados após o carregamento da página também respondem aos eventos. A diferença é que este não utiliza o document como elemento raiz, você mesmo escolhe o elemento raiz, casando-o com o seletor. Assim sendo, é clara a vantagem em desempenho deste método.

Veja o que diz a documentação oficial do jQuery sobre o delegate.

ON

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// Attach an event handler function for one or more
// events to the selected elements.

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

// ----------------------------------------------
// Exemplo:

// Estilo bind
jQuery('#botao').on('click' function() {
    // faz alguma coisa...
});

// Estilo delegate
jQuery('#botao').on('a', 'click' function() {
    // faz alguma coisa...
});

Se você utiliza uma versão do jQuery superior a 1.7, deverá utilizar sempre o método on (ele surgiu para substituir todas as outras funções), para as versões anteriores recomenda-se o uso do bind e delegate, como acabamos de ver.

Veja o que diz a documentação oficial do jQuery sobre o on.

É isso galera, se tiverem alguma dúvida quanto a utilização desses métodos ou algo a acrescentar deixe um comentário, ficaremos felizes em lhe responder.

REFERÊNCIAS

• Documentação Oficial do jQuery