Un alto en el camino, eventos.

Hacemos un alto en el camino para aprender un poco más sobre los eventos. Serán tres entregas:

  1. Eventos, cómo funcionan. Características básicas.
  2. Eventos en jQuery. Veremos cómo usar on.
  3. Eventos en jQuery. ¿Qué es eso de trigger?

¿Qué es un evento?

Un evento puede representar varias cosas, pero normalmente es una respuesta a una acción del usuario en nuestra página. Por ejemplo, al pinchar en un elemento lanzamos el evento click. Si seleccionamos un campo, se lanza el evento focus. La lista completa la podéis encontrar la página de w3schools.

 El proceso

El proceso que sigue un evento es algo más elaborado de lo que nos podríamos imaginar en un primer momento. Cuando damos una función para que maneje (handle) un evento, hacemos que maneje el evento en un elemento determinado. Por ejemplo, en este fiddle tenemos tres cajas y, cada vez que pinchamos en una de ellas, nos muestra una alerta con el número de caja, distintas cajas, responden de distinta forma. El código no es importante, pues usaremos jQuery para manejar los eventos y no las apis del DOM, como en este caso. Además, para ahorrarnos código podríamos haber escrito una función que devolviese funciones, como en este fiddle.

Manejando un evento

Para manejar un evento contamos con dos importantes conceptos: el handler y el objeto event.

El handler no es más que la función que será invocada cuando se reciba el evento. Dicha función se ha de relacionar con un nodo del documento, y sólo será invocada si ese nodo en particular recibe el evento correspondiente. Esto es importante cuando veamos qué pasa cuando se dispara un evento.

El handler recibe un argumento con un objeto Event. Aunque dicho objeto es bastante importante, esperaremos a verlo al momento en el que veamos cómo manejar eventos con jQuery.

Sin embargo, el proceso no es tan simple como disparar y recibir un evento.

Every event is bubbling

Un evento es una respuesta a una acción. La acción crea y pone en movimiento un objeto Event. ¿Pero qué camino sigue este evento?  Veamos el siguiente fiddler. El código sigue sin ser importante, sólo que estoy añadiendo un handler (así llamaremos a las funciones que se ejecutan cuando sucede el evento) a todos los elementos li, estando estos anidados y con fondo de distinto color para saber en cuál de ellos estamos haciendo click. El handler lo único que hace es cambiar el texto dentro del li.

Una vez el evento se pone en marcha, sigue subiendo en el árbol del documento, yendo nodo padre a nodo padre. A este proceso lo llamaremos propagación o bubbling. Dicho proceso se puede comprobar haciendo click en los distintos colores de fondo en el anterior fiddler.

Podemos refinar un poco más esta idea con el siguiente fidller. En él, añadimos un nodo hermano al nivel 3. Si pulsamos en el nivel 3 o 4, vemos que el hermano no pulsado no recibe el evento.

Parando un evento

Podemos evitar que un evento siga propagándose o cancelar la acción predefinida de un evento.

Un evento se dice cancelable si su acción predefinida puede ser evitada. Por ejemplo, hacer click en un enlace tiene como acción predefinida el seguir dicho enlace. Al hacer click en un botón para enviar la información de un formulario, la acción predefinida consiste en evitar dicho envío. Estos eventos son cancelables y podemos evitar la acción por defecto llamando al método preventDefault en el objeto Event que se pasa al handler. Hay una forma alternativa de evitar la acción por defecto: devolviendo false desde el handler. Sin embargo, prefiero llamar explícitamente a los diferentes métodos puesto que el comportamiento difiere en jQuery.

Por otra parte, también podemos usar el método stopPropagation para evitar que el evento se propague, aunque esto no evitaría la acción por defecto.

Notas finales

Sé que esta entrega se ha retrasado, y seguramente reduzca el número de publicaciones a dos por semana: una al principio y otra al final.

Lo importante de esta entrega no es saber cómo añadir handlers o cómo parar la propagación de un evento. Todos eso lo veremos cuando hablemos de eventos en jQuery.