En este artículo vamos a seguir explorando las librerías YUI, ofreciendo una explicación inicial sobre cómo funcionan los eventos en este framework Javascript.

El presente artículo no es más que una breve introducción a las YUI 3, para que los interesados puedan dar sus primeros pasos con las librerías. En el artículo anterior ya se explicó el modo de crear nuestro primer script con YUI, así que ahora vamos a complicar un pelín el anterior ejemplo, para aplicarle una interacción con el usuario básica.

Como sabemos, con los eventos podemos captar la realización de acciones por parte del usuario en la página web, como hacer clic sobre elementos, mover el ratón o pulsar las teclas del teclado. Todos esos eventos los podemos detectar de una manera sencilla con YUI y programar acciones a realizar cuando se producen. Lo veremos a continuación.

Método on() para definición de eventos

En YUI 3 existe un método llamado on(), que pertenece al objeto YUI, con el que podemos definir los eventos. Este método recibe 3 parámetros, el primero el tipo de evento que queremos detectar, el segundo la función a realizar cuando se produzca ese evento y el tercero un selector del elemento o elementos de la página a los que se desea aplicar ese evento.

Por ejemplo, veamos la siguiente invocación al método on():

Y.on("click", holaEvento, "#enlace1");

Y es una instancia del objeto YUI, que ya vimos en el anterior artículo que se obtenía por medio del método use(). Sobre esa instancia tenemos que invocar al método on().

Ahora fijémonos en los parámetros enviados al método. El primer parámetro tiene el valor "click", que indica que queremos detectar clics del ratón.

El segundo parámetro, con el valor holaEvento es la función que debe ejecutar ese evento. En dicha función recibimos a su vez un parámetro con un objeto evento, que nos puede venir bien para hacer cosas con el evento u obtener información de él. Por ejemplo, en seguida veremos el código de la función holaEvento.

El tercer parámetro "#enlace1" es un selector que me permite indicar el elemento de la página al que quiero asociar ese evento.

Ejemplo sencillo con eventos en YUI

Para poder explicar de manera sencilla y práctica la realización de eventos en YUI vamos a hacer un ejemplo en el que tendremos dos enlaces. Detectaremos los eventos clic en ambos enlaces, mostrando un mensaje en una caja de alerta(). Al tratarse de eventos click sobre enlaces, el comportamiento habitual de esos eventos es trasladar al navegador a una URL distinta, indicada en el href del enlace. Así que para hacer más interesante el ejercicio aprenderemos también la manera de bloquear las acciones por defecto de los eventos, de modo que, al pulsar el enlace, no se nos lleve a la URL marcada en el href del enlace.

Veamos entonces por partes este ejercicio. Primero fijémonos en el código HTML de nuestros enlaces:

<a href="https://desarrolloweb.com/" id="enlace1">Ir a DesarrolloWeb.com, ejecutando antes evento</a>
<br>
<a href="http://www.desarrollomedia.es/" id="enlace2">Ejecutando evento pero sin ir a la URL</a>

Son enlaces normales, con el detalle que tienen definidos identificadores para referirnos a ellos de manera inequívoca, mediante los atributos id de la etiqueta A.

Ahora podemos ver dos funciones a ejecutar cuando se produzca el evento. De momento veamos simplemente estas funciones y luego mostraremos el código con el que asociaremos las funciones a los eventos clic de cada uno de los dos enlaces.

function holaEvento(e){
   alert("Hola desde un evento");
}
function holaEventoPrevenir(e){
   e.preventDefault();
   alert("Hola! pero no te voy a llevar a la URL");
}

Ambas funciones son bastante sencillas y muestran en una caja de alerta un texto. Además, tal como se habrá podido comprobar, reciben un parámetro, que es el objeto evento que se ha producido. La primera función no hace nada con ese objeto evento y la segunda función lo utiliza para prevenir el comportamiento por defecto del evento, concretamente con la línea:

e.preventDefault();

El método preventDefault() del objeto evento hace que, cuando se produzca el evento, se corte la propagación del mismo y con ello se impida el comportamiento por defecto del evento. Así pues, la función holaEventoPrevenir() muestra un mensaje de alerta y también bloquea el evento para su posterior propagación y al ser asociada al evento clic de un enlace, ocurrirá que al pulsar sobre el link el navegador no nos lleve a ningún lugar.

Ahora veamos cómo se asociarían esas funciones a los elementos enlace, para que se ejecuten cuando se haga clic sobre los enlaces.

YUI().use('node', function(Y) {
   Y.on("click", holaEvento, "#enlace1");
   Y.on("click", holaEventoPrevenir, "#enlace2");
});

Recordemos que el método use() se explicó en el anterior artículo, pero básicamente sirve para cargar las librerías que se desean (en este caso "node") y codificar una función a ejecutar cuando el navegador esté listo para recibir acciones. En esa función tenemos una variable Y, que es la instancia del objeto YUI que nos servirá para invocar funciones del framework Javascript.

Dentro de esa función como se puede comprobar, simplemente se llama al método on() del objeto YUI para asociar eventos con sus funciones a elementos de la página.

Y.on("click", holaEvento, "#enlace1");

Asociará el evento "click" al elemento con identificador "enlace1" y cuando se haga clic se invocará la función holaEvento().

Y.on("click", holaEventoPrevenir, "#enlace2");

Esta otra línea de código asociará el evento "click" al elemento de la página con id="enlace2" y cuando se haga clic en ese elemento se invocará la función holaEventoPrevenir().

Eso es todo, con esto ya tenemos definidos nuestros primeros eventos usando las librerías YUI. Podemos ver a continuación el código completo de este ejercicio:

<html>
<head>
   <title>Ejemplo con eventos de YUI 3</title>
   <script src="yui-min.js" type="text/javascript"></script>
   <script>
   function holaEvento(e){
      alert("Hola desde un evento");
   }
   function holaEventoPrevenir(e){
      e.preventDefault();
      alert("Hola! pero no te voy a llevar a la URL");
   }
   YUI().use('node', function(Y) {
      Y.on("click", holaEvento, "#enlace1");
      Y.on("click", holaEventoPrevenir, "#enlace2");
   });
   </script>

</head>

<body>

<a href="https://desarrolloweb.com/" id="enlace1">Ir a DesarrolloWeb.com, ejecutando antes evento</a>
<br>
<a href="http://www.desarrollomedia.es/" id="enlace2">Ejecutando evento pero sin ir a la URL</a>
</body>
</html>

Los interesados pueden ver en marcha el ejemplo en una página aparte.

En el próximo artículo seguiremos mostrando ejemplos con eventos definidos con YUI.