Definir eventos con bind() y eliminarlos con unbind()

A lo largo del Manual de jQuery ya hemos aprendido bastantes cosas sobre los eventos en este framework Javascript. Hemos conocido cómo a partir de diversos métodos como click(), mouseenter() y similares, podemos asignar un manejador de evento (una función) a un tipo de evento concreto. 

Ahora vamos a aprender a utilizar una única función de jQuery para definir cualquier tipo de evento, lo que sería como una manera genérica de definir eventos, de cualquier tipo, sobre elementos de la página. Además mostraremos cómo se puede eliminar un evento, quitando un posible manejador de eventos definido con anterioridad. 

Aprendimos en el pasado a definir eventos por medio de unas funciones específicas para cada tipo de evento. Por ejemplo:

$("#elem1").click(function(){

//evento clic sobre el elemento con id "elem1"

});

$("#elem2").mouseenter(function(){

//evento de entrar con el ratón sobre el elemento con id "elem2"

});

Estas maneras de trabajar son perfectamente viables y muy cómodas de utilizar para crear eventos de un tipo en concreto, pero en jQuery existe otra manera de definirlos con la que ganaremos alguna ventaja. 

Método bind() para definir cualquier tipo de evento 

Con el método bind() podemos definir de una manera genérica cualquier tipo de evento, o incluso un mismo manejador de eventos para distintos tipos de eventos distintos. El uso más habitual de este método es el siguiente:

bind(tipo_de_evento, manejador)

Como primer parámetro enviamos el tipo de evento que queremos definir. Si se desea, podríamos especificar varios tipos de eventos separados por un espacio y así asignar un mismo manejador de evento para varios tipos de situaciones. 

Como segundo parámetro se indica el manejador o función a ejecutar cuando se produzca el evento, igual que se definía con los métodos click(), mouseleave() o similares, para un tipo de evento en concreto. 

Un ejemplo sencillo de este modo de definir eventos es el siguiente:

$(".miclase").bind("click", function(){

alert("Has hecho clic");

});

Al hacer clic en cualquier elemento de la clase CSS "miclase", se mostrará un mensaje en una caja de alerta. Ahora podemos ver cómo se crearía una función que se asignaría para varios tipos de eventos a la vez.

$("p").bind("click mouseenter mouseleave", function(e){

if ($(this).css("color")!="rgb(250, 100, 0)")

$(this).css("color", "rgb(250, 100, 0)");

else

$(this).css("color", "rgb(150, 0, 255)");

})

Como se puede ver, se ha definido un evento para todos los párrafos de la página, que se activará con los tipos de eventos: "click mouseenter mouseleave". La función que hace de manejador de eventos averigua el color del elemento y lo va intercambiando entre dos colores distintos. Este evento se ejecutará al hacer clic, al entrar en el elemento con el puntero del ratón o al salir del elemento con el ratón.