¿Cuál es la diferencia entre .delegate() y live()?

Question

Desde

$("table").delegate("td", "hover", function(){ 
    $(this).toggleClass("hover"); 
}); 

es equivalente al siguiente código escrito usando .live():

$("table").each(function(){ 
    $("td", this).live("hover", function(){ 
     $(this).toggleClass("hover"); 
    }); 
}); 

según jQuery API.

apuesto a que estoy equivocado, pero no es lo mismo de escribir

$("table td").live('hover', function() {}); 

Por lo tanto, lo que hay es .delegate() para?

Answer 1

.live() escucha en document donde como .delegate() escucha en un elemento más local, la <table> en ese caso.

Ambos actúan de la misma manera para que los eventos burbujeen, el de .delegate() solo burbujea menos antes de ser atrapado.

Su ejemplo de:

$("table td").live('hover', function() {}); 

no es el mismo, ya que de nuevo se conecta a un controlador de eventos document y no <table>, por lo .delegate() es para los elementos más locales, más eficientes en muchos aspectos .. .aunque todavía usa .live() debajo de las cubiertas.

---

También hay que tener en cuenta que $(selector) recupera los elementos, por lo $("table td") selecciona un grupo de elementos de verdad sin motivo cuando se utiliza .live(), donde como $("table").delegate() selecciona sólo los <table> elementos, por lo que incluso inicialmente es más eficiente al no ejecutar el selector y descartar el resultado.

Answer 2

El doc:

Dado que el método .live() gestiona los eventos una vez que se han propagado a la parte superior del documento, no es posible detener la propagación de eventos en vivo. De forma similar, los eventos manejados por .delegate() siempre se propagarán al elemento al que están delegados; los controladores de eventos en cualquier elemento debajo ya se habrán ejecutado para cuando se llame al controlador de eventos delegados.

Answer 3

La forma live() obras es que se coloca un controlador en el nivel superior de la DOM (el documento) que detecta cuando su evento elegido burbujas hasta ese nivel (y luego comprueba para ver si fue arrojado por una elemento que coincide con su selector).

delegate() funciona de la misma manera, pero el controlador se coloca en el elemento seleccionado (por lo que solo puede detectar eventos lanzados por los descendientes de ese elemento).

Las desventajas de live() son 1) los problemas de rendimiento inherentes a la detección y comprobación de todos los eventos que burbujean al nivel del documento, y 2) el hecho de que no se puede detener la propagación en esos eventos (ya que no saber de ellos hasta que alcancen el nivel de documento).

delegate() mitiga estos dos problemas al permitir restringir el controlador a un conjunto de elementos más pequeño (los elementos que coinciden con su selector y sus descendientes) en lugar de toda la página.