5.2. Vincular eventos a elementos

jQuery ofrece métodos para la mayoría de los eventos — entre ellos $.fn.click, $.fn.focus, $.fn.blur, $.fn.change, etc. Estos últimos son formas reducidas del método $.fn.bind de jQuery. El método bind es útil para vincular (en inglés binding) la misma función de controlador a múltiples eventos, para cuando se desea proveer información al controlador de evento, cuando se está trabajando con eventos personalizados o cuando se desea pasar un objeto a múltiples eventos y controladores.

Vincular un evento utilizando un método reducido

$('p').click(function() {
    console.log('click');
});

Vincular un evento utilizando el método $.fn.bind method

$('p').bind('click', function() {
    console.log('click');
});

Vincular un evento utilizando el método $.fn.bind con información asociada

$('input').bind(
    'click change',  // es posible incular múltiples eventos al elemento
    { foo : 'bar' }, // se debe pasar la información asociada como argumento
    function(eventObject) {
        console.log(eventObject.type, eventObject.data);
        // registra el tipo de evento y la información asociada { foo : 'bar' }
} );

5.2.1. Vincular eventos para ejecutar una vez

A veces puede necesitar que un controlador particular se ejecute solo una vez — y después de eso, necesite que ninguno más se ejecute, o que se ejecute otro diferente. Para este propósito jQuery provee el método $.fn.one.

Cambiar controladores utilizando el método $.fn.one

$('p').one('click', function() {
    console.log('Se clickeó al elemento por primera vez');
    $(this).click(function() { console.log('Se ha clickeado nuevamente'); });
});

El método $.fn.one es útil para situaciones en que necesita ejecutar cierto código la primera vez que ocurre un evento en un elemento, pero no en los eventos sucesivos.

5.2.2. Desvincular eventos

Para desvincular (en ingles unbind) un controlador de evento, puede utilizar el método $.fn.unbind pasándole el tipo de evento a desconectar. Si se pasó como adjunto al evento una función nombrada, es posible aislar la desconexión de dicha función pasándola como segundo argumento.

Desvincular todos los controladores del evento click en una selección

$('p').unbind('click');

Desvincular un controlador particular del evento click

var foo = function() { console.log('foo'); };
var bar = function() { console.log('bar'); };

$('p').bind('click', foo).bind('click', bar);
$('p').unbind('click', bar); // foo esta atado aún al evento click

5.2.3. Espacios de nombres para eventos

Cuando se esta desarrollando aplicaciones complejas o extensiones de jQuery, puede ser útil utilizar espacios de nombres para los eventos, y de esta forma evitar que se desvinculen eventos cuando no lo desea.

Asignar espacios de nombres a eventos

$('p').bind('click.myNamespace', function() { /* ... */ });
$('p').unbind('click.myNamespace');

// desvincula todos los eventos con el espacio de nombre 'myNamespace'
$('p').unbind('.myNamespace');

Vinculación de múltiples eventos

Muy a menudo, elementos en una aplicación estarán vinculados a múltiples eventos, cada uno con una función diferente. En estos casos, es posible pasar un objeto dentro de $.fn.bind con uno o más pares de nombres claves/valores. Cada nombre clave será el nombre del evento mientras que cada valor será la función a ejecutar cuando ocurra el evento.

Vincular múltiples eventos a un elemento

$('p').bind({
    'click': function() { console.log('clickeado'); },
    'mouseover': function() { console.log('sobrepasado'); }
});