Eventos en Mootools: Element Event

Los eventos son una de las partes fundamentales de Mootools que debemos dominar para poder hacer componentes dinámicos con Javascript, que respondan a las acciones realizadas por los usuarios. En el Manual de Mootools publicado en DesarrolloWeb.com ya hemos visto en algunos ejemplos cómo se realizan eventos, pero aun no hemos ofrecido explicaciones detalladas sobre cómo crearlos. Ha llegado el momento de ponernos en la tarea de conocer los eventos, para crearlos y empezar a hacer scripts más interactivos.

Así pues, vamos a trabajar con la clase Element de Mootools, para aprender a crear eventos que respondan a acciones del usuario realizadas sobre cualquier elemento de la página.

Para ello, los elementos de la página, que se modelizan a través de la clase Element, tienen un método llamado addEvent(), que recibe el tipo de evento y la función que debe ejecutarse como respuesta al mismo. Lo veremos con detalle en este artículo.

Definir un evento sobre un elemento de la página

Suponemos que tenemos un elemento cualquiera de la página, al que queremos asignar un evento.

<div id="mielemento">Este elemento</div>

Ahora, con Javascript podemos definir el siguiente código para asignar un evento a este elemento:

$("mielemento").addEvent('click', function() {
   alert('Has pulsado "mielemento"...');
});

Como se puede ver, se accede al elemento a través de la función dólar ($). Luego sobre ese elemento se invoca el método addEvent, al que le pasamos dos parámetros.

'click': es el tipo de evento que queremos definir (onclick, onmouseover... ) pero sin el prefijo "on". Así pues, click sirve para definir un evento que se desata cuando se hace clic sobre el elemento.

function(): Luego se define la función que se debe invocar para realizar la ejecución de acciones relacionadas con la puesta en marcha del evento. Esta serie de funciones se pueden definir a continuación en el mismo código, abriendo las llaves de la función y luego colocando todas las sentencias a ejecutar cuando se ejecute el evento.

Podemos ver el ejemplo en marcha en una página donde tenemos todos los ejemplos sobre eventos que vamos a ver en este artículo.

window.addEvent('domready', function() {
      $("mielemento").addEvent('click', function() {
         alert('Has pulsado "mielemento"...');
      });
});

Otro ejemplo de creación de eventos en Mootools

Para que se pueda entender mejor este sistema para la definición de eventos de usuario en Mootools, vamos a poner otro código para la ejecución de otro evento sobre otro tipo de elemento de la página. En este caso vamos a definir un evento "onchange" sobre un campo select de formulario. El evento onchange se desata cuando cambia el valor seleccionado en el campo de selección desplegable.

Tenemos este campo select de formulario:

<form>
<select id="miselect">
<option value="1">Opcion 1</option>
<option value="2">Opcion 2</option>
</select>
</form>

Como se puede ver, hemos colocado un identificador en la etiqueta SELECT, para poder referirnos a él mediante Mootools. Ahora veamos cómo definir un evento sobre este campo.

$("miselect").addEvent('change', function() {
   alert('Has cambiado el campo select');
});

El ejemplo es similar, con la diferencia que en este caso hemos utilizado el evento "change" que corresponde al mencionado evento de Javascript onchange.

Podemos ver este código funcionando en este enlace.

Ya hemos podido comenzar a crear eventos con Mootools, con addEvent(), ahora vamos a pasar a utilizar una función realmente útil en Mootools, bind(), pero lo explicaremos en el siguiente artículo.