04May 2012 11 Comments */?>

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

Categorías: JQuery, Tutoriales - Tags: ,

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 no vamos 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!!!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • DnHrrr

    Hacía tiempo que tenía dudas sobre esto y la verdad es que tu post me aclaro absolutamente todo. Muchas gracias!

  • Plcabgut

    perfectamente claro muchas gracias

  • gato

    Genial amigo..gracias =)

  • David Guerrero Morales

    Una pregunta, entonces ¿que función utilizo cuando creo contenido dinámico?, de antemano muchas gracias y buen post (y)

    • Katia Il Fuoco

       Caramba que lo ha dejao claro, ON, o en su defecto DELEGATE

  • Katia Il Fuoco

    Super!!! lo que andba buscando!! Gracias!!

  • cape

    Gracias por el dato, me sirvió de mucho

    Saludos

  • Prueba

    Gracias, un buen resumen.

  • Segundo Ibarra

    Gracias mi funcion dinamica frunco.!!!

  • CristianT

    Magnifico!
    Muchas gracias por la explicación.

  • Broda Noel

    Muy buena. Bien claro.
    Si hay actualizaciones, por favor aplicalas.
    Saludos!