jQuery delegate() vs live() vs bind() vs on()

Muchas veces me han preguntado la diferencia entre las funciones de jQuery  delegate(), live(), bind() y on(). Por lo que hoy les voy a explicar de forma sencilla las principales diferencias y cual función deberían usar en cada momento.

Para empezar veamos en que versión de jQuery fueron implementadas dichas funciones, ya que ello indicará en primer lugar cual debemos usar.

• live() y bind() : V1.0 – Última actualización en V1.4.3
• delegate(): V1.4.2 – Última actualización en V1.4.3
• on(): V1.7

En el mismo orden que esta arriba les voy a explicar las diferencias. Para ello voy a usar el mismo código HTML y el evento click para que sea más facil de entender.

1. bind()

La función bind() sirve para asociar un evento a un element del DOM. Por ejemplo:

$('#usuarios li a').bind('click', function( e ) {} );

Una forma más corta de hacer lo mismo es:

$('#usuarios li a').click( function( e ) {} );

A simple vista resulta sencillo de utilizar pero tiene algunas pegas.

Los inconvenientes de este método son:

• Primero que no hay delegación del evento, por lo que si creamos un nuevo link , el evento del click no estará asociado a el.
• Segundo que la asociación del evento se hace de antemano y a todos los elementos del selector. En nuestro ejemplo si tenemos una lista de 100 usuarios serían 100 eventos asociados de antemano produciendo una carga más lenta.

2. live()

La función live() es prácticamente igual a bind con la diferencia que asocia el evento al root del DOM y cuando un evento se dispara y llega al root se comprueba si el selector concuerda y se ejecuta la función.

Por ejemplo:

$( "#usuarios li a" ).live( "click", function( e ) {} );

La ventaja de esto es que podemos crear elementos dinámicamente , y cuando el evento click se dispare y suba hasta el document (elemento root) jQuery comprobará si el selector concuerda y ejecutará la función. Pasar de bind() and live() es tan sencillo como cambiar una palabra

Los inconvenientes de este método son:

• El chaining no puede ser usado en este metodo
• Es un método obsoleto en jQuery 1.7 por lo que no conviene seguir usandolo
• Si tenemos un DOM bastante grande la performance es baja ya que tiene que pasar todo el DOM hasta el document
• Y como todos los selectores/eventos son asociados al documentes una vez sucede el evento jQuery tiene que comprobar cada uno de ellos para ver cual es el que se tiene que ejecutar.

Ahora veamos porque delegate() es incluso mejor.

3. delegate()

La función delegate() es muy parecida a live con la diferencia de que podemos asociar el evento a un selector en lugar de asociar el selector y el evento al document.

Por ejemplo:

$( "#usuarios" ).delegate( "li a", "click", function( e ) {} );

Como pueden ver asociamos el evento click a todos los links de elementos li , pero solo dentro de #usuarios. En lugar de hacerlo al document.
Como se dan cuenta las ventajas de esto son muchisimas:

• Podemos elegir donde asociar el evento/selector
• Chaining funciona perfectamente
• Podemos usar la “magia” de live ya que si añadimos elementos dinamicamente estos funcionaran correctamente.
• Aunque jQuery aun tiene que comparar los eventos con los selectores, al definir el propio root los datos a comparar son muy inferiores.

Algunas desventajas a mencionar pueden ser:

• Usar esta nueva función no es tan simple como cambiar de bind() a live()
• jQuery aun tiene que comparar eventos/selectores para ver que evento invocar.

3. on()

La función on() fue introducida en jQuery 1.7 para traer un poco de “orden” a las anteriores funciones.On() posee todas las ventajas de delegate() pero a su vez sirve como la función bind()dependiendo de como lo usemos.

Por ejemplo:

// Bind
$( "#usuarios li a" ).on( "click", function( e ) {} ); 
$( "#usuarios li a" ).bind( "click", function( e ) {} ); 

// Delegate
$( "#usuarios" ).on( "click", "li a", function( e ) {} ); 
$( "#usuarios" ).delegate( "li a", "click", function( e ) {} );

Como pueden ver según como usemos on() nos sirve para una cosa u otra. ¿Como usarlo? Pues si novamos a crear elementos dinámicamente lo usaremos como bind()

Ventajas:

• Trae una forma secilla de usar todos los métodos y más facil de enteder
• Incluye todas las ventajas de delegate() y puede ser usado como bind() en caso de ser necesario.

Inconvenientes de esta función:

• A veces puede resultar un poco confuso que según como lo uses , su función cambie.

Conclusión

Como conclusión podemos decir que si tenemos jQuery 1.7+ debemos usar on(). Si esto no es posible usaremos delegate() donde sea posible antes que usar live() cuando necesitemos añadir elementos dinámicamente. Y en caso de no ser necesario usaremos bind() como última opción.

Todo esto puede resultar bastante confuso pero resumiendo podemos decir que:

• Usar bind() tiene un costo muy alto ya que asocia el evento a todos los selectores
• No debemos utilizar más live() ya que es un método antiguo y trae problemas de rendimiento.
• El nuevo on() reemplaza a bind() o delegate() según como sea usado.

En otras palabras, actualicen sus versiones de jQuery y empiecen a familiarizarse con la función on(). Espero que les haya gustado el tutorial. Saludos.

Fuente: http://api.jquery.com/on/
Fuente: http://www.masquewordpress.com/jquery-delegate-vs-live-vs-bind-vs-on/
Fuente: http://www.funcion13.com/2012/02/07/live-jquery-1-7/