Eventos básicos

Seguimos con el tutorial de jQuery. Hoy vamos a aprender cómo funcionan los eventos, es decir, las acciones que se desencadenan cuando los usuarios hacen algo, como pulsar un botón o pasar el cursor por alguna zona.

Ya hemos visto un poco el mecanismo básico en unidades anteriores. Se asocian como métodos a un selector y, en una función, se indican las acciones que deben ocurrir con ese evento.

Y el segundo es que, cuando lo que sucede en el evento afecta al mismo selector que lo desencadena se puede utilizar la palabra reservada this, que viene a significar «este mismo». Por ejemplo, para cambiar el color de un párrafo cuando es pulsado, podríamos escribir:

Y ahora ya sí vamos con los eventos básicos.

Eventos básicos con el ratón

Los dos eventos fundamentales, cuya sintaxis se debe aprender de memoria, son:

1) .click()

La acción se desencadena (trigger) cuando se pulsa (y suelta) un elemento.

2) .hover

Este es muy útil para cualquier acción relacionada con los rollovers, es decir, con cosas que pasan al pasar el cursor por un elemento. Lleva dos funciones separadas por comas, en la primero se define lo que debe suceder cuando se sitúe el cursor sobre un elemento y en la segundo la que debe pasar cuando lo abandone. Por ejemplo, este script colorearía un párrafo de rojo al pasar sobre el elemento y luego de verde al abandonarlo.

Además, hay otros eventos básicos que se suelen emplear menos:

3) .dblclick

Cuando se pulsa dos veces con el ratón.

 4) .mouseenter / .mouseout

Equivalen a .hover. Con .mouseenter ocurre la acción al entrar el cursor en un elemento y con .mouseout al salir.

5) .mouseup / .mousedown

Son muy parecidos a .click. Con .mousedown la acción se desencadena al pulsar el ratón y con .mousedown al dejar de pulsar.

6. .mouseleave

Cuando el cursor abandona un elemento. Es muy parecido a .mouseout, pero se actúa de forma diferente si afecta a un nodo hijo. Es un matiz sobre el que ahora no vale la pena profundizar, pero si alguien está interesado puede consultar el artículo de mkyong Different Between Mouseout() And Mouseleave() In JQuery.

7. .toggle

Este evento está «deprecated», es decir, eliminado de la última versión de jQuery, por lo que me limito a enunciarlo por si alguna vez lo veis en algún script o plugin. Servía para desencadenar un evento en función de si se había pulsado ya un elemento.

Eventos básicos con el teclado

 1. keypress

Cuando el usuario pulsa alguna tecla. Por ejemplo, con este código se cambiaría el párrafo cuando el usuario comenzase a escribir en el campo del formulario.

2. Keydown / Keyup

Lo mismo que en el caso anterior, pero al ser pulsada o levantada la tecla.

Eventos con el teclado o el ratón

Estos eventos, sobre todo, se usan para trabajar con formularios, un tema que veremos en profundidad más adelante, y se desencadenan cuando se sitúa el «foco» sobre un elemento, como ocurre con los campos de un formulario cuando se sitúa el curso sobre ellos para escribir.

1) .focus

Cuando se sitúa el foco

2) .blur
Cuando se pierde el foco (muy útil para chequear que se han escrito los datos de forma correcta)

3) .focusin / .focusout

Similares a los anteriores, pero afectan también a los nodos hijo.

Caso práctico

En la próxima entrada veremos más eventos, pero ahora vamos a poner en práctica lo aprendido con el siguiente ejercicio. ¿Cómo se podría hacer un menú desplegable con lo que ya sabemos? Es decir, un menú que al pasar el cursor se desplegaran las respectivas subopciones.

La respuesta es sencilla si recordamos la propiedad display de las CSS, que  puede adquirir entre otros valores:

• block: para que un elemento sea visible (se comporte como un bloque)
• none: para esconder un elemento (para que no se muestre)

Tratamos de pensarlo y luego miramos la solución.

Solución

Una forma entre varias de hacerlo:

1). Primero se hacen tres bloques flotados a la izquierda, cada uno de los cuales incluye una lista desordenada a la que se le quitan todos los estilos (el margen, los cuadratines, etcétera)

Debería quedar algo similar a esta imagen:

2) Mediante jQuery, con el selector jerárquico prev ~ siblings se ocultan los elementos hermanos de cada bloque a partir del primer <li>, que es el que empleamos com opción principal.

Práctica: una capa overlay

Bueno, pues, con todo lo que sabemos ya, la siguiente práctica es bien sencilla. Hay que hacer una caja (1) que se despliegue al pulsar un enlace (2), la cual debe tener además un botón cerrar (3).

Pista: conviene recordar cómo funciona la propiedad z-index.

Algo parecido a esta imagen:

¿Nos va gustando más jQuery?  😉