Mootools – Parte II – addEvent
junio 13, 2008
Continuamos con la serie de informes sobre Mootools, vale la pena aclarar que para los ejemplos y las explicaciones, usamos la versión 1.11 de Mootools, ya ha sido liberada la versión 1.2 y trae consigo muchos cambios y nuevas formas de hacer las cosas. Probablemente vamos a tener que reescribir algo del código que hagamos con la versión 1.11. Pero por lo menos vamos a poder tener una introducción al tema con este mini manual.
Sabemos que una página al ser invocada por el navegador va solicitando los objetos a medida que se van necesitando, o van siendo leídos. Es decir que el servidor envía la página y el navegador lo primero que ve es la etiqueta <HTML> luego la etiqueta <HEAD> y carga cada una de las etiquetas que están dentro del HEAD de forma secuencial, y así sucesivamente con cada línea de nuestra página.
El problema se presenta cuando intentamos ejecutar un método Mootools y la librería aun no se ha cargado, o cuando necesitamos asignar un evento a un objeto y el objeto aun no ha sido cargado. En estos casos vamos a tener una Excepción de javascript.
Para evitar esto, debemos asegurarnos ejecutar los métodos y funciones cuando ya estemos seguros que no van a fallar por que el objeto aun no existe. Mootools nos facilita esta tarea, al ayudarnos a detectar la carga de la página. Estos eventos son:
Doomready: Ocurre cuando se ha cargado todo el contenido de la página excepto imágenes.
Load: Ocurre cuando todos los objetos de la página han sido cargados.
Estos eventos son los que nos permiten informar al usuario de que la carga de la página está en proceso o ya finalizó al estilo de aplicaciones como GMAIL.
Para utilizar estos eventos vamos a usar el método AddEvent de Mootools, y lo vamos a asignar al objeto Window.
Ejemplo:
window.addEvent(‘domready’,function(){
// CODIGO …
});
El método addEvent permite asignar a cualquier objeto un evento, y ejecutar una función específica al momento de disparar el evento.
La sintaxis es:
miObjeto.addEvent( ‘click’ , mifuncion )
Un ejemplo para adicionar un evento click a un link podría ser así:
window.addEvent(‘domready’,function(){
$(‘elLinkID’). addEvent(‘click’,function(){
Alert(«Esta es una prueba…»);
});
});
En donde la definición del link dentro del HTML sería:
<a href=»#» id=»elLinkID»>click aquí</a>
Listo, ahora ya tenemos un evento capturado con Mootools. Básicamente los eventos se llaman igual que en HTML pero sin el prefijo «on» es decir el «onClick» ahora es «click».
Y así con los demás eventos como blur, mouseover, etc.
Esto funciona igual con la versión 1.2 ya que es algo estándar y básico del framework.
otra vez publicando de afan, espero que pueda hacer cada vez mejores mis publicaciones…
Codeline 
junio 16, 2008 at 9:41 am
[…] PARTE II […]