on y off, los nuevos métodos para vincular y desvincular manejadores en jQuery

Una de las novedades destacadas de la versión 1.7 de jQuery, publicada hace un par de semanas, son las funciones .on() y .off(), que tienen como objetivo unificar los distintos métodos que teníamos disponibles para asignar y desasignar manejadores a eventos: .bind(), .unbind(), .delegate(), .undelegate(), .live() y .die().

Es conveniente utilizar desde ya este nuevo par de métodos; no solo porque simplifican la API, sino porque es probable que en próximas versiones el resto de funciones termine por desaparecer. Tanto es así, que si echamos un vistazo al código de la nueva versión, veremos que la implementación de los antiguos métodos se ha sustituido ya por simples llamadas a .on() y .off().

Los nuevos métodos tienen la siguiente sintaxis:

$(elementos).on(eventos [,selector] [,datos], manejador);
$(elementos).off([eventos] [,selector] [,manejador]);

Si no pasamos ningún selector como parámetro, .on() es similar a .bind(), donde simplemente asociamos el manejador a elementos. Esto es también lo que hacen .click(), .hover(), .change(), .submit() y el resto de abreviaturas.

$('tr').on('click', resaltar);
$('tr').bind('click', resaltar);

Cuando se pasa un selector como parámetro, es similar a .delegate(), donde el manejador se añade a elementos, pero lo que comprobamos es si se produce el evento en los descendientes filtrados con selector. Cuando se produce el evento, se comprueba cada uno de los ancestros en el DOM hasta encontrar el que tiene el manejador adecuado. El tratamiento del evento se delega entonces al ancestro; de ahí su nombre. Esto puede ser útil, por ejemplo, si tenemos miles de filas: podemos asociar el manejador a la tabla, en lugar de tener que hacerlo sobre todas y cada una de las filas, lo cuál puede ser tremendamente lento.

$('table').on('click', 'tr', resaltar);
$('table').delegate('click', 'tr', resaltar);

El uso de .live(), que es parecido a .delegate(), aunque usando document como raíz, no está recomendado, porque el evento tendría que recorrer todos los ancestros hasta document en busca del manejador adecuado, haciéndolo muy lento cuando nuestra jerarquía es muy profunda. Aun así, si queremos, también podemos imitarlo:

$(document).on('click', 'tr', resaltar);
$('tr').live('click', resaltar);



Comentarios
    • Pues sí.

      Aunque hay gente que se queja porque con delegate pueden ver si es delegado en un golpe de vista, sólo con el nombre del método, y con on tendrán que fijarse en si alguno de los parámetros tiene aspecto de selector.

      Responder

  1. seria interesante algun dia aprender a programar jquery

    Responder

Deja un comentario