Eventos en jQuery

Los eventos son una parte fundamental en el desarrollo de aplicaciones enriquecidas del lado del cliente. Aprendemos todo sobre los eventos en jQuery.

Eventos en jQuery 

Una introducción al trabajo con eventos en el framework Javascript jQuery. 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. 

Nota: Puedes ver el videotutorial Introducción a los eventos en jQuery para que te sea más sencillo todo. 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.