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.

Eliminar un evento con la función unbind()

Ahora vamos a aprender a hacer el paso contrario, es decir, eliminar un evento previamente asignado a un elemento o varios elementos de la página. El procedimiento es bastante sencillo.

Si invocamos a unbind() sin ningún parámetro, eliminamos todos los manejadores de eventos, de cualquier tipo de evento, de los objetos jQuery.

$("p").unbind();

Así hemos eliminado todos los eventos asociados con los párrafos de la página. Pero quizás una situación más habitual es que deseemos eliminar sólo los eventos de un tipo y para ello simplemente tenemos que indicar como parámetro ese tipo concreto de evento deseado.

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

Esta sentencia provocará se descarten que todos los manejadores de eventos asociados al clic sobre los párrafos. Como se puede entender, sobre esos elementos no ocurrirá nada en el momento en que hagamos clic. Además, en el supuesto que otros scripts Javascript hayan definido algún manejador de evento clic sobre alguno de los elementos, unbind() también eliminará esos posibles eventos.

Para no eliminar todos los manejadores de eventos de un tipo determinado podemos especificar la función que deseamos descartar en la lista de parámetros de la llamada a unbind(). Esto funcionaría en un esquema de código como el siguiente.

var funcionManejador = function(e) {
   // cualquier código
}
$("p").bind('click', funcionManejador);
$("p").unbind('click', funcionManejador);

Siempre tendremos que colocar la función dentro de una variable, para poder referirnos a esa misma variable tanto al crear el evento con bind(), como al descartarlo con unbind().

Ejemplos con los métodos bind() y unbind() de jQuery

A continuación puede verse el código de una página completa que pone en práctica las explicaciones ofrecidas en el artículo.

El ejemplo se puede ver en marcha en una página aparte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Eventos bind</title>
   <script src="../jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
   
   $("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)");
   })
   
   function clicAlerta(){
      alert("Has hecho clic");
   }
   
   $(".miclase").bind("click", clicAlerta);
   
   $("#quitarevento").bind("click", function(){
      $(".miclase").unbind("click", clicAlerta);
   })
})
</script>
</head>
<body>

<p class="miclase">Primer párrafo</p>
<p>Otro párrafo</p>

<input type=button value="Quitar el alert del clic del primer párrafo" id="quitarevento">
</body>
</html>

En el próximo artículo veremos una utilidad interesante para definir eventos sobre elementos actuales y futuros sobre un selector jQuery, que nos facilitará las cosas en scripts más complejos.