Los nuevos métodos jQuery on() y off()

Introducción

Con la llegada de jQuery 1.7, se han solucionado varios bugs que esta biblioteca arrastraba de versiones anteriores; también se ha mejorado una vez más el rendimiento general de la misma prestándose especial atención a selectores y a la portabilidad a los dispositivos móviles.

Pero además de estos ‘arreglos’, tenemos nuevos métodos y nuevas funcionalidades interesantes. De entre los primeros, sin duda los más interesantes son los que se refieren a la nueva gestión de eventos: el corazón de jQuery.

Los eventos en jQuery

Desde su aparición, jQuery se ha caracterizado por la flexibilidad con la que el desarrollador puede efectuar selecciones de elementos dentro del DOM y por la facilidad para asociar eventos a cada uno de esos conjuntos seleccionados.

Sin embargo, un problema con el que han tenido que lidiar los chicos del jQuery Team es que, con el paso de las versiones, estos manejadores (handlers) se han multiplicado hasta resultar confusos en las últimas releases.

Al principio, solo disponíamos del viejo método bind con el que asignábamos un determinado evento a un objeto jQuery:

$('mySelector').bind('click', function(){
  // The callback goes here...
})

Para aquellos eventos muy frecuentes, como en el caso del click anterior, contábamos incluso con prácticos atajos (shortcuts):

$('mySelector').click( function(){
  // The callback goes here...
});

El problema de bind es que solo funciona con aquellos elementos del DOM que ya están presentes cuando la función se ejecuta. Es decir, aquellos otros elementos que pudieran añadirse de forma dinámica, no heredan este comportamiento.

Para solventar este problema, apareció en escena el método live(). Sin embargo, live presentaba más problemas que ventajas y rápidamente se consideró obsoleto (deprecated). El problema con este método proviene de su bajo rendimiento en estructuras complejas y de algunos comportamientos impredecibles que se dan en determinados escenarios. Para un completo artículo sobre el porqué no debemos usar jQuery live, podemos leer un artículo escrito hace algún tiempo en este blog sobre ese respecto.

Buscando una vía alternativa al uso de live, jQuery ofreció un nuevo método muy similar: delegate(). Hasta el momento, delegate ha tratado de cubrir la funcionalidad de asociar eventos a elementos DOM pero, de nuevo, el resultado no ha sido todo lo satisfactorio que cabría esperar.

Es por todo esto que, frente a la confusión por parte del desarrollador de encontrarse tantos métodos similares (bind, live, delegate, one, …), el jQuery Team ha decidido crear dos nuevos métodos que aúnen el comportamiento de todos ellos buscando el máximo rendimiento y minimizando la confusión: on() y off().

El método on()

El objetivo de on() es reemplazar a los antiguos bind, live y delegate. Su sintaxis es la siguiente:

$(elements).on(events [, selector] [, data], handler);

Donde:

• events son los eventos que se buscan asociar al conjunto de elementos seleccionados. La novedad aquí es que pueden asociarse más de un evento separándolos con espacios. Por ejemplo: ‘click’, ‘click blur’.
• selector especifica los descendientes de los elementos seleccionados que dispararán el evento. Se trata de un parámetro opcional.
• data indica cualquier tipo de datos que se necesite pasar al manejador cuando se dispara el evento. Es también un parámetro opcional y, por lo general, se corresponde con un objeto jQuery.
• handler se corresponde con el callback o acción a realizar después de que el evento se dispare.

Un ejemplo de uso completo puede ser el siguiente:

$('#myContainer .item').on({
  click: function() {
    event.preventDefault();
    console.log('item clicked');
  },
  mouseenter: function() {
    console.log('enter!');
  }
});

El resultado del código anterior es que hemos asociado dos eventos diferentes, con dos callbacks diferentes a aquellos elementos DOM que cumplan con el criterio de la selección (en este caso aquellos con la clase ‘item’ descendientes de un ID ‘myContainer’). Como hemos comentando más arriba, al reemplazar a live() y delegate(), este comportamiento será heredado por cualquier otro elemento que se inserte en el DOM de forma dinámica aún después de haber sido ejecutada la función anterior.

Actualizaciones desde métodos antiguos

Actualizar nuestros viejos códigos a la nueva versión resulta por lo general sencillo:

// Old live() style:
$('#myContainer .item').live('click', function(event) {
  event.preventDefault();
  console.log('item clicked');
});
 
// New on() style:
$('#myContainer').on('click', '.item', function(event) {
  event.preventDefault();
  console.log('item clicked');
});

En el ejemplo anterior hemos visto además, como se asocian selectores dentro del propio cuerpo de la función para especificar aquellos descendientes que dispararán el evento.

// Old delegate() style:
$('#myContainer').delegate('.item', 'click', function(event) {
  event.preventDefault();
  console.log('item clicked');
});
 
// New on() style:
$('#myContainer').on('click', '.item', function(event) {
  event.preventDefault();
  console.log('item clicked');
});

En el caso de la actualización desde delegate, solo necesitamos cambiar el orden de los parámetros.

El método off()

Al igual que con la asocación de eventos, la confusión de métodos también llegaba con la acción contraria: eliminarlos.

Para esta acción, contábamos con varios métodos como unbind(), die() o undelegate(). De nuevo, el objetivo principal de la nueva instrucción es reemplazarlos a todos de un modo consistente.

La sintaxis de off() resulta similar a la de on():

$(elements).off( [ events ] [, selector] [, handler] );

Con off(), todos los parámetros son opcionales. Cuando se utiliza en su forma más simple, $(elements).off(), se eliminan todos los eventos asociados al conjunto seleccionado.

Actualizaciones desde métodos antiguos

Como en el caso anterior, dependiendo de qué método vengamos, la conversión presenta más o menos cambios.

Para el caso de unbind(), solo necesitamos cambiar el nombre del método:

// Old unbid() style:
$('#container a').unbind('click');
 
// New off() style:
$('#container a').off('click');

Para aquellos códigos que hagan uso del live() / die(), el cambio es similar:

// Old die() style:
$('#container a').die('click');
 
// New off() style:
$('#container').off('click', 'a');

De nuevo, solo es necesario organizar ligeramente el orden de los parámetros para aprovechar la nueva potencia del método off().

Para la portabilidad desde undelegate(), solo tenemos que cambiar el orden de los parámetros:

// Old undelegate() style:
$('#container a').undelegate('a', 'click');
 
// New off() style:
$('#container a').off('click', 'a');

Conclusión

Con la nueva versión 1.7 de jQuery, se trata por fin de poner algo de orden en cuanto al manejo de eventos que ofrece esta biblioteca, aunando en unos mismos métodos toda la funcionalidad que hasta la fecha se había ido desplegando en varios.

Con esto, el resultado es un API más robusto y sólido, exactamente lo que los desarrolladores jQuery han solicitado al equipo de desarrollo.

Fuente