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/

post-author