change - Jquery live() vs delegate()

jquery on hover

Question

Esta pregunta ya tiene una respuesta aquí:

• jQuery: live () vs delegate () 4 respuestas

He leído algunas publicaciones aquí y en otras partes de la web sobre las diferencias entre live() y delegate() . Sin embargo, no he encontrado la respuesta que estoy buscando (si esto es un engaño, por favor dígame).

Sé que la diferencia entre en live y delegate es que live no se puede usar en una cadena. También leí en algún lugar que el delegate es en algunos casos más rápido (mejor rendimiento).

Mi pregunta es, ¿hay alguna situación en la que deba usar live lugar de delegate ?

ACTUALIZAR

Configuré una prueba simple para ver la diferencia en el rendimiento.

También agregué el nuevo .on() que está disponible en jQuery 1.7+

Los resultados resumen bastante los problemas de rendimiento como se indica en las respuestas.

• No use .live() menos que su versión de jQuery no sea compatible con .delegate() .
• No use .delegate() menos que su versión de jQuery no sea compatible con .on() .

La diferencia entre .live() y .delegate() es MUCHO mayor que entre delegate() y .on() .

Answer 1

Considera este ejemplo

<ul id="items">
<li> Click Me </li>
</ul>
$(''#items'').delegate(''li'', ''click'', function() {
$(this).parent().append(''<li>New Element</li>'');
});

Al pasar un elemento DOM como el contexto de nuestro selector, podemos hacer que Live () se comporte (casi) de la misma manera que delegate (). Afecta el manejador al contexto, no al documento, que es el contexto predeterminado. El código siguiente es equivalente a la versión de delegado () que se muestra arriba.

$("li", $("#items")[0]).live("click", function() {
$(this).parent().append("<li>New Element</li>");
});

Resource

Pero, será mejor que use delegate para un mejor rendimiento, vea aquí

Answer 2

Dos situaciones vienen a la mente:

1. Utilizaría delegate en el elemento del body , por lo que puede usar live lugar, ya que es más simple.

2. Debe utilizar una versión anterior de la biblioteca jQuery, donde el evento de delegate aún no está implementado.

Answer 3

Nunca uso en live ; Considero que los beneficios de usar delegate son tan importantes que resultan abrumadores.

El único beneficio de live es que su sintaxis es muy similar a la de bind :

$(''a.myClass'').live(''click'', function() { ... });

delegate , sin embargo, usa una sintaxis un poco más detallada:

$(''#containerElement'').delegate(''a.myClass'', ''click'', function() { ... });

Esto, sin embargo, me parece mucho más explícito sobre lo que realmente está sucediendo. No se da cuenta por el ejemplo en live que los eventos se están capturando en el document ; con delegate , está claro que la captura de eventos ocurre en #containerElement . Puedes hacer lo mismo con live , pero la sintaxis se vuelve cada vez más horrible.

Especificar un contexto para que se capturen los eventos también mejora el rendimiento. Con el ejemplo en live , cada clic en el documento completo debe compararse con el selector a.myClass para ver si coincide. Con delegate , eso es solo los elementos dentro de #containerElement . Obviamente, esto mejorará el rendimiento.

Finalmente, en live requiere que su navegador busque a.myClass ya sea que exista o no . delegate solo busca los elementos cuando se desencadenan los eventos, lo que proporciona una mayor ventaja de rendimiento.

El delegate NB utiliza live detrás de escena, para que pueda hacer cualquier cosa con live que pueda hacer con delegate . Mi respuesta se refiere a ellos ya que se usan comúnmente.

Tenga en cuenta también que ni live ni delegate es la mejor forma de hacer delegación de eventos en jQuery moderno. La nueva sintaxis (a partir de jQuery 1.7) está con la función on . La sintaxis es la siguiente:

$(''#containerElement'').on(''click'', ''a.myClass'', function() { ... });

Answer 4

Son exactamente lo mismo excepto:

• .delegate() permite restringir la sección local de la página, mientras que .live() debe procesar eventos en toda la página.
• .live() comienza con una selección de DOM desperdiciada

Cuando llamas a .delegate() , simplemente da la vuelta y llama a .live() , pero pasa el parámetro de contexto adicional.

https://github.com/jquery/jquery/blob/master/src/event.js#L948-950

Como tal, siempre usaría .delegate() . Si realmente necesita procesar todos los eventos en la página, simplemente dele el body como contexto.

$(document.body).delegate(''.someClass'', ''click'', function() {
// run handler
});

Las versiones anteriores de jQuery en realidad tienen funcionalidad de delegate . Solo debe pasar un selector o elemento como propiedad de contexto al llamar a .live() . Por supuesto, debe estar cargado en la página.

$(''.someClass'', ''#someContainer'').live(''click'',function() {
// run handler
});

Y tiene el mismo comportamiento que .delegate() .