Desde la versión 1.7 de jQuery tenemos el método on(), que nos ofrece toda la funcionalidad necesaria para gestionar eventos. Gracias a este método ya no necesitamos los antiguos bind(), live() o delegate(), pero tampoco blur(), focus(), click(), hover() y otros.
Al igual que existe on(), tenemos su contrario, off(), que elimina los eventos asignados con on().
Pero lo mejor es que veamos ejemplos.
Supongamos que queremos hacer algo cuando se haga click sobre un botón:
|
1 2 3 4 5 |
(function(){ $('button').click(function() { // código }); })(); |
Es como lo haríamos tradicionalmente con click(). Pero si miramos el código de jQuery veremos que en realidad lo que sucede es que se está llamando al método on(), por lo que lo más rápido es hacer:
|
1 2 3 4 5 |
(function(){ $('button').on('click', function() { // código }); })(); |
Esta es la ruta más directa. Y lo mismo para otros métodos como change(), hover(), mouseenter(), etc.. (en realidad hover() lo que hace es llamar a “mouseenter()” y a “mouseleave()” que a su vez llaman al método “on()” )
Veamos jQuery. Si descargamos la versión 1.7 o superior y buscamos en su código, veremos lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { // Handle event binding jQuery.fn[ name ] = function( data, fn ) { if ( fn == null ) { fn = data; data = null; } return arguments.length -> 0 ? this.on( name, null, data, fn ) : this.trigger( name ); }; |
De aquí sólo nos interesa ver que los métodos “blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error y contextmenu” al final terminan todos en “this.on( name, null, data, fn )“.
bind(), live() y delegate()
Antiguamente también se hacía:
|
1 2 3 4 5 |
(function(){ $('button').bind('click', function() { // código a ejecutar cuando se haga click en el botón }); })(); |
O si queríamos que el evento funcionara incluso después de añadir nuevos elementos “button” al documento entonces usábamos el método live():
|
1 2 3 4 5 |
(function(){ $('button').live('click', function() { // código a ejecutar cuando se haga click en el botón }); })(); |
Con posterioridad, jQuery introdujo “delegate()“, que nos permitía asignar un evento a un contexto. Por ejemplo, si el botón está (o va a estar, si se añade con posterioridad) dentro de un div con la clase “contenedor”:
|
1 2 3 4 5 |
(function(){ $('div.contenedor').delegate('button', 'click', function() { // código a ejecutar cuando se haga click en el botón }); })(); |
Pero igual que con los anteriores, tanto bind(), como live() o delegate() lo único que hacen es llamar al método on().
Veámoslo una vez más en el código de jQuery:
|
1 2 3 |
bind: function( types, data, fn ) { return this.on( types, null, data, fn ); } |
|
1 2 3 4 |
live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; } |
|
1 2 3 |
delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); } |
Es decir, podemos seguir usándolos, pero no tiene mucho sentido si sabemos que jQuery en realidad está llamando el método on().
Podemos terminar viendo un ejemplo que nos ofrece la propia página de jQuery sobre cómo usar el método on() con un evento delegado (como el que vimos antes con “delegate()“). Supongamos que tenemos una tabla con 1.000 filas en su tbody. Con este código asignamos el evento a los 1.000 elementos, con la carga de trabajo que supone:
|
1 2 3 |
$("#dataTable tbody tr").on("click", function(event){ alert($(this).text()); }); |
En cambio, con el evento delegado podemos asignar el gestor del evento sólo a un elemento, en este caso el “tbody”, y el evento sólo necesitará subir un nivel (desde el tr sobre el que se ha hecho click hasta tbody):
|
1 2 3 |
$("#dataTable tbody").on("click", "tr", function(event){ alert($(this).text()); }); |
Excelente aporte!
Solo un detalle.
Si observas el código fuente de jQuery 1.7.2+, la función live(). apunta a la función nueva on().
Por lo que la forma correcta de utilizar on(). (y por supuesto off().) según jQuery es asi:
Comento esto por que si intentas utilizar la función on(). como la propones aqui, funcionará con los elementos existentes en el DOM. Pero al momento de agregar elementos al documento dinámicamente, ya sea por eventos o AJAX, no funcionará.
Saludos!
Gracias Marty!
ola, como hicistes la animacion de la seccion “¿que dicen nuestros clientes?”,, me gustaria saber..
gracias