jQuery 1.7 y los nuevos .on() y .off() para eventos

jQuery LogoLos chicos de jQuery liberaron hace un par de días jQuery 1.7, introduciendo una nueva forma de trabajar con eventos.

Para descargar jQuery 1.7, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>

Novedades en jQuery 1.7

La principal novedad de esta versión son los nuevos APIs .on() y .off() para eventos, cuya finalidad es unificar la funcionalidad de .delegate() y .bind(). La sintaxis de ambos es:

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

Cuando se establece un selector, .on() es similar a .delegate() ya que asigna un manejador de eventos delegado filtrado por dicho selector. Cuando el selector se omite, entonces su comportamiento es como .bind().

No te preocupes si en tus proyectos usas los métodos existentes para asignar eventos, todos ellos aún son válidos en jQuery 1.7

Algunos ejemplos:

$('a').bind('click', myHandler);
$('a').on('click', myHandler);
 
$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);
 
$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');
 
$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);
 
$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');
 
$('a').live('click', fn);
$(document).on('click', 'a', fn);
 
$('a').die('click');
$(document).off('click', 'a');

Otras novedades que valen la pena mencionar:

  • Desempeño mejorado en la delegación de eventos.
  • Mejor soporte para HTML5 en IE 6/7/8
  • Mejoras en las animaciones.
  • Soporte para el Asynchronous Module Definition (AMD).
  • El objeto jQuery.Deferred ha sido extendido con un nuevos manejadores de progreso y métodos de notificación.
  • ¡Y mucho más! Te invito a consultar la documentación sobre jQuery 1.7.

Fuente: jQuery Blog.

Share