Queremos hacer una introducción a uno de los apartados más importantes de las aplicaciones web del lado del cliente, los eventos, y cómo trabajar con ellos en el framework Javascript jQuery. Esta primera introducción servirá para que las personas comiencen a trabajar con los eventos y sepan definir comportamientos sencillos como respuesta a las acciones del usuario sobre la página.

Los eventos, como decimos, es una de las áreas más importantes de jQuery y cualquier otro lenguaje de programación que sirva para definir la interacción con el usuario. Como tal, en el Manual de jQuery hemos ya publicado varios artículos sobre los eventos. En la presente serie de vídeos no vamos a ver todo lo que hay que saber sobre los eventos, pero al menos veremos suficientes cosas para que las personas puedan empezar a practicar con ellos.

En principio, todos los conocimientos teóricos sobre los eventos las vamos a dar por sabidos en el vídeo, donde preferimos limitarnos a ofrecer explicaciones eminentemente prácticas. Así que aprenderemos aquí a trabajar con las diferentes posibilidades de los eventos en Javascript y jQuery.

En este caso presentamos una serie de 3 vídeos que nos introducirán de manera sencilla tres temas diferentes dentro del tratamiento de eventos.

Vídeo 1: Definición de eventos en jQuery

Comenzaremos mostrando casos simples sobre la definición de eventos en jQuery. Estos casos servirán para aprender a trabajar con eventos típicos como click o mouseover y ver de qué manera podemos asignar instrucciones cuando se producen.

Videotutorial 2: Objeto evento en jQuery

El objeto evento es una de las herramientas más importantes para personalizar la ejecución de eventos conforme a nuestras necesidades específicas. Por medio de este objeto evento podemos acceder a diversas informaciones de interés sobre el evento que se ha producido y su contexto, así como invocar algunos métodos para realizar cosas con él.

Para ver el trabajo con el objeto evento mostraremos cómo se puede cortar el comportamiento por defecto de un evento sobre un elemento y cómo podemos acceder a datos como las coordenadas x, y donde se situaba el ratón en el momento de producirse un evento. Las explicaciones se complementan en el artículo Introducción Objeto evento en jQuery.

Vídeo 3: Variable this dentro de la función de un evento

Con this tenemos una referencia al objeto que ha producido un evento. Esa variable tiene valor dentro del código de la función que se ejecuta al producirse el evento. Por tanto, this será una referencia al objeto sobre el cual estamos trabajando.

En el vídeo mostraremos cómo definir un evento para todos los párrafos de la página y luego con la variable this acceder únicamente al párrafo sobre el que se está ejecutando el evento, para hacer cosas sólo con él.

Con estos tres videotutoriales esperamos que se hayan podido entender los eventos jQuery de una manera sencilla, pero recordamos que hay muchas otras cosas importantes que revisar sobre este tema y que dejamos para más adelante, en futuros vídeos.