En nuestro Manual de Mootools hemos explicado ya algunas de las claves del trabajo con eventos. Pero todavía hay algunos detalles que se deben comentar y mostrar ejemplos de código para dominar el sistema de eventos.

En general, ya vimos como asociar un evento a un elemento de la página y también cómo utilizar el método bind() para conseguir cambiar el ámbito de la variable this cuando se está codificando el comportamiento de un evento. Ahora veremos cómo podemos disparar un evento de un elemento de la página, automáticamente, sin necesidad que el usuario produzca el evento.

Método fireEvent de Element.Event

El método fireEvent() sirve para ejecutar un evento de un elemento, es decir, lanzar un evento que pertenece a un elemento de la página, sin que el usuario haya tenido que realizar nada con ese elemento.

Este método se invoca sobre el elemento de la página del que se quiere ejecutar el evento (un botón o elemento de formulario, un enlace, una capa DIV o lo que sea) y recibe varios parámetros.

• Tipo de evento: el nombre del evento que se desea lanzar.
• Parámetros para el evento: uno o varios parámetros que se tienen que pasar a la función que ejecuta el evento. Si es más de un parámetro, se tienen que indicar en un array.
• Retardo: número de milisegundos que se tiene que ejecutar el evento.

Aquí tenemos el primer ejemplo de este artículo de DesarrolloWeb.com de los dos que vamos a ver sobre el método fireEvent, en el que vamos a tener un botón HTML. Luego crearemos un evento "click" para ese botón y lo invocaremos con fireEvent.

Este sería el botón:

<input type="button" value="pulsar" id="miboton">

Ahora veamos el código Javascript con Mootools para crear el evento click y lanzarlo con fireEvent:

window.addEvent("domready", function(){
   $("miboton").addEvent("click", function(){
      alert("Evento click en el botón");
   });
   
   $("miboton").fireEvent("click");
   
});

Habría de verse que estamos obligados a utilizar addEvent del evento domready, para asegurarnos que este código se ejecuta cuando el DOM está listo.

Luego se puede ver que con addEvent del evento click sobre el objeto $("miboton") (el elemento HTML botón, que tenía el id="miboton") generamos el correspondiente evento para cuando se haga clic en el botón.

Luego, con $("miboton").fireEvent("click"); lanzamos el evento "click", que será como si el usuario hubiese hecho clic sobre el botón.

Podemos ver el ejemplo en marcha en una página aparte.

Importante sobre fireEvent

El método fireEvent sirve para ejecutar cualquier tipo de evento de los que se pueden escribir con los manejadores de eventos normales de Javascript: onclick, onload... Pero ojo, sólo podremos lanzar eventos que hayan sido creados o declarados a partir del método addEvent de Mootools y no eventos que se hayan declarado escribiéndolos con el correspondiente atributo HTML de evento (onclick, onmousedown, etc.) en la propia etiqueta del elemento .

Cabe decir además sobre fireEvent que se puede ejecutar sobre los objetos window y document, con lo que se pueden lanzar eventos sobre la ventana del navegador o sobre el objeto documento, como si el usuario los hubiese producido. Con la excepción del evento "domready", que realmente sólo se ejecuta cuando el DOM está listo.

Segundo ejemplo de fireEvent

Veamos un segundo ejemplo, para acabar de mostrar las posibilidades de los eventos en Mootools que podemos poner en marcha con fireEvent. En este ejemplo queremos mostrar la utilización de otros parámetros de fireEvent, a la vez que abrimos las puertas a la creación de eventos personalizados en nuestras aplicaciones Javascript.

Como se había dicho antes, se pueden indicar otros atributos a fireEvent, uno es un parámetro que se le pasa a la función que se encarga de procesar el evento y el otro un retardo para la ejecución del evento.

Además, en este segundo ejemplo vamos a crear un método personalizado, que no tiene nada que ver con cualquier evento de los que existen en Javascript. El evento lo hemos creado personalizado sólo por hacer una prueba y lo hemos llamado "desarrolloweb".

Tememos un elemento de la página, en este caso un enlace:

<a href="https://desarrolloweb.com" id="mienlace">Volver a DesarrolloWeb.com</a>

Y ahora un código Mootools para crear el evento personalizado "desarrolloweb", que creamos como si fuera uno de los eventos normales de Javascript:

$("mienlace").addEvent("desarrolloweb", function(algo){
   alert("Este evento me lo he inventado\n" + algo);
});

Vemos ahora que la función que procesa el evento tiene un parámetro llamado "algo" que se muestra en la caja de alerta.

Ahora podemos ejecutar este evento con fireEvent(), de esta manera:

$("mienlace").fireEvent("desarrolloweb", "parametro que le paso a la función",1000);

Como se puede ver, se ejecuta el evento personalizado "desarrolloweb", se le pasa un parámetro con una cadena de texto y se hace un retardo de 1 segundo (1000 milisegundos).

El ejemplo se puede ver en marcha en una página aparte.

Como se ha podido ver, con Mootools es fácil codificar eventos y lanzarlos (ponerlos en marcha) desde el propio código javascript, como si hubiera sido el propio usuario el que hubiese producido el evento con sus acciones sobre los elementos de la página.