Eventos en Mootools: Element Event

  • Por
Primeras nociones para trabajo con eventos en elementos Mootools, vemos el método addEvent de la clase Element.
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.

Nota: Suponemos que ya se conocen lo que son los eventos y qué eventos tenemos disponibles en Javascript para hacer cosas como resultado de las acciones del usuario sobre la página. Si no sabemos qué son los eventos y cuáles tenemos disponibles, recomendamos la lectura de nuestros manuales de Javascript, concretamente los artículos del manual de Javascript II que tratan sobre eventos: Eventos en Javascript y los artículos siguientes del manual.

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.

Nota: También debemos decir que lo correcto es añadir el evento (es decir, llamar al método addEvent) cuando se ha cargado ya el DOM de la página y está listo para recibir acciones. Así que lo correcto es utilizar el evento domready de window, como se puede ver en este código.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

SäNTÿ

24/1/2009
amm los enlaces de los ejemplos no sirven..xD

marcsali

09/4/2009
Muy buen manual...felicitaciones
Buenas,
Excelente trabajo..hasta hoy solo habia encontrado literatura en ingles que abordaba el aspecto de las librerias JS 'frameworks'..

Gracias.

midesweb

12/5/2009
Ejemplos enlazados correctamente
Hola! y gracias por el aviso de enlaces rotos! hemos enlazado ya correctamente los ejemplos sobre los eventos en el texto del artículo.
Saludos!!

Camilo

21/10/2010
Seleccionar con mootols
Hola es claro el manejo de evento para manejar el select
pero el problema es el siguiente: con mootool quiero cambiar el elemento seleccionado por otro y no se cual es la sintaxis, tengo la idea en jquery pero no funcionó en mootools si alguien me puede ayudar se lo agradeceria.
sintaxis en jQuery:

$('#serv > option[value="77"]').attr('selected','selected');