Los eventos son uno de los elementos más importantes en el desarrollo de aplicaciones web enriquecidas del lado del cliente, puesto que sirven para realizar acciones en la página a medida que el usuario realiza cosas con la página. Es decir, son la base para crear la interacción con el usuario, algo tan importante en las páginas que usan jQuery.

Así pues, merece la pena estudiar los eventos a fondo, algo que haremos a lo largo de éste y varios siguientes artículos del Manual de jQuery. No obstante, cabe decir que, a lo largo del presente manual, hemos ya trabajado en repetidas ocasiones con eventos, ya que es complicado realizar ejemplos en páginas web que no tengan aunque sea una mínima interacción con el cliente. Casi siempre nos hemos limitado al evento clic, pero hay mucho más.

Comenzaremos por refrescar lo que ya deberíamos saber sobre los eventos, que aprendimos en uno de los primeros artículos del presente manual: Pasos para utilizar jQuery en tu página web.

A la vista de este código que trabaja con eventos podemos entender un poco mejor cómo funcionan en jQuery:

$(".mienlace").click(function(mievento){
   mievento.preventDefault();
   alert("Has hecho clicnComo he hecho preventDefault, no te llevaré al href");
});

1. El evento se define sobre todos los elementos de un objeto jQuery. En este ejemplo se define sobre el objeto jQuery obtenido al invocar el selector ".mienlace"), que devolvería todos los elementos que tienen el atributo class como "mienlace". Por tanto definiré un evento sobre un número variable de elementos de la página que concuerden con ese selector.
2. El tipo de evento se define a partir de una función click() o similares. Existen diferentes tipos de funciones que implementan cada uno de los eventos normales, como dblclick(), focus(), keydown(), etc.
3. Como parámetro en la función click() o similares tenemos que enviar una función, con el código que pretendemos ejecutar cuando se produzca el evento en cuestión.
4. La función que enviamos por parámetro con el código del evento, en este caso la función a ejecutar al hacer clic, tiene a su vez otro parámetro que es el propio evento que estamos manejando. En el código anterior tenemos la variable "mievento", que es el evento que se está ejecutando y a través de esa variable tenemos acceso a varias propiedades y métodos para personalizar aun más nuestros eventos.
5. Como decimos, existen diversos tipos de propiedades y métodos sobre el evento que recibo por parámetro. En este caso utilizamos mievento.preventDefault() para evitar el comportamiento por defecto de un enlace. Como sabemos, al pulsar un enlace el navegador nos lleva al href definido en la etiqueta A correspondiente, algo que evitamos al invocar a preventDefault() sobre nuestro evento.

Convenía explicar todos estos puntos, aunque probablemente ya los conocíamos, si es que hemos seguido con atención este Manual de jQuery. Es importante que el lector tenga en mente esta estructura de trabajo con eventos para poder asimilar fácilmente los nuevos conocimientos.

Si lo deseamos, podemos ver el anterior script en marcha en una página aparte.

En el ejemplo anterior vimos cómo realizar un evento clic, pero claro que no es el único evento que podemos aplicar a una web. En el próximo artículo veremos un listado de los tipos de evento disponibles en jQuery, pero antes de eso vamos a ver un ejemplo adicional sobre eventos, en el que vamos a incorporar el evento dblclick que aun no habíamos visto.

Ejemplo de evento dblclick

El evento doble-clic se produce cuando se realizan dos clic seguidos sobre un mismo elemento. Todos conocemos lo que es un doble clic, por lo que no necesitamos muchas más explicaciones, no obstante, tenemos que saber que cuando se produce un evento doble-clic al mismo tiempo se están produciendo eventos clic (uno por cada uno de los 2 clic del doble-clic). Para aclarar este asunto hemos hecho el siguiente ejemplo.

Tenemos una capa, en la que se puede hacer doble-clic, pero que también tiene definido un evento clic. Entonces, al hacer un doble clic podremos comprobar que se producen dos eventos clic y después un doble-clic.

Este es el código HTML con el que vamos a trabajar:

<div id="micapa" style="padding: 10px; background-color: #ffcc99; width: 150px; float: left;">Hazme dobleclick</div>

<div id="mensaje" style="padding: 10px; margin-left: 180px;">Aquí voy a colocar mensajes para que los leas...</div>

Para poder saber cuántos clics y dobles clic que se realizan, vamos a crear un par de variables Javascript para contarlos.

var numClics = 0;
var numDobleClics = 0;

Ahora veamos la programación del evento clic:

$("#micapa").click(function(e){
   numClics++;
   $("#mensaje").html("Clic " + numClics);
});

Con $("#micapa") obtenemos el objeto jQuery de la capa donde hay que hacer clic. Con el método click() sobre ese objeto jQuery creamos el evento clic y la función que pasamos como parámetro contiene el código a ejecutar cuando se hace clic. Se trata simplemente acumular 1 en la variable que cuenta los clics y luego se muestra un texto en la capa de los mensajes.

La programación del evento para el doble clic se puede ver a continuación:

$("#micapa").dblclick(function(e){
   numDobleClics++;
   $("#mensaje").html("Doble Clic " + numDobleClics);
});

Como se puede ver, es un código muy similar al anterior. Simplemente que se define el evento con el método dblclick(). En el código del evento acumulamos esta vez 1 en la variable que cuenta el número de dobles clic. Luego en el mensaje mostramos el número de doble-clic.

Con ello, al hacer clic o doble-clic se mostrará el mensaje para ver la cuenta de clics y dobles clic realizados y podremos comprobar que siempre se producen dos clics antes de cualquier doble clic.

Eso es todo, aunque para completar esta información, puedes encontrar a continuación el código completo de este ejemplo de uso de eventos en jQuery.

<html>
<head>
<title>Trabajando con eventos</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
var numClics = 0;
var numDobleClics = 0;

$(document).ready(function(){
   
   $("#micapa").dblclick(function(e){
      numDobleClics++;
      $("#mensaje").html("Doble Clic " + numDobleClics);
   });
   $("#micapa").click(function(e){
      numClics++;
      $("#mensaje").html("Clic " + numClics);
   });
})
</script>

</head>
<body>
<h1>Trabajando con eventos en jQuery</h1>
   <div id="micapa" style="padding: 10px; background-color: #ffcc99; width: 150px; float: left;">Hazme dobleclick</div>
   <div id="mensaje" style="padding: 10px; margin-left: 180px;">Aquí voy a colocar mensajes para que los leas...</div>
</body>
</html>

Quizás quieras ver funcionando de este ejemplo de evento clic y doble-clic.

En este artículo sólo hemos conocido los manejadores de eventos clic y doble-clic, pero hay muchos más. En el próximo artículo presentaremos un listado de los tipos de manejadores de eventos disponibles en jQuery.