jQuery es una biblioteca de Javascript, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
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().
Vamos a ver una serie de ejemplos para entender mejor el metodo on().
Supongamos que queremos ejecutar una funcion cuando se haga click sobre un botón:
(function(){
$('button').click(function() {
// código a ejecutar
});
})();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:
(function(){
$('button').on('click', function() {
// código a ejecutar
});
})();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:
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(" "), f
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:
(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():
(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”:
(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().
