Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (I Básico)

MooTools: la librería más completa para trabajar fácilmente con javascript.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 95

Visitas el mes pasado: 102

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools (VIII)

Eventos

imagen mootools

Método addEvent()

Los eventos son fundamentales para dar dinamismo a la página. Hasta ahora los hemos tratado con javascript, para ello hemos puesto los eventos en el código HTML, asociandolos a una función.

Con mootools podemos también asociar a cualquier elemento un evento, mediante el método addEvent(). Utilizaremos el siguiente código:

$("elemento").addEvent("nombre_evento",function() {
//código a ejecutar al desatarse el evento.
});

El código anterior lo pondremos dentro de la estructura "domready", ya que debemos tener cargada la página para poder localizar sus elementos. Fíjate que la propia estructura "domready" es en sí un evento, que aplicamos a todo el documento.

Veamos un sencillo ejemplo en el que al hacer click en un elemento se nos muestra una ventana de alerta. El código sería así:

window.addEvent("domready",function() {
   $("boton1").addEvent("click",function(){
      alert("Has hecho click");
   });
});

Podríamos haber hecho lo mismo poniendo el código de la ejecución del evento en una función aparte. en ese caso el código sería este:

window.addEvent("domready",function() {
   $("boton1").addEvent("click",ventana);
});
function ventana() {
    alert("Has hecho click");
    }

En ambos casos el resultado es el mismo, y sólo nos falta definir el elemento con id="boton1 :

<button id="boton1">Haz click aquí</button>

Vemos aquí el botón después de aplicarle el código anterior:


Método addEvents()

Se utiliza cuando se quiere asignar más de un evento a un mismo elemento, en ese caso como argumento debemos pasar un objeto que contiene las parejas evento: función() { ...), separadas por comas (Todo ello se escribe dentro de llaves):

$("ver1").addEvents({
mouseover: function(){this.setStyles({"color":"red","borderColor":"red"})},
mouseout: function(){this.setStyles({"color":"navy","borderColor":"navy"})}
});

Observa cómo aquí el nombre del evento no lo ponemos con comillas. Por otra parte destacamos también el uso de this para referirnos al elemento al que se aplica el evento.

Hemos aplicado este ejemplo a un elemento con id="ver1", al que le hemos puesto un borde y un texto con color "navy". El resultado es el siguiente:

Pasa el ratón por aquí para cambiar el color


Método removeEvent()

Anula un evento creado anteriormente con mootools. Para ello al crear el evento debemos pasarle el nombre de una función, y no una función anónima. por ejemplo tenemos un botón con el siguiente código html:

<button id="boton2">Abrir ventana de alerta</button>

al que le hemos puesto el siguente código en mootools:

$("boton2").addEvent("click",ventana);
function ventana() { alert("Has abierto una ventana de alerta"); }

La primera línea debemos ponerla dentro del "domready", mientras que la segunda, la función, debe estar fuera de la estructura "domready". El botón será el siguiente:

Sin embargo ahora queremos anular el botón anterior, es decir quitarle el evento asociado, para ello creamos otro botón con un evento click que anula el botón anterior:

<button onclick="$('boton2').removeEvent('click',ventana)">Anular botón anterior </button>

Al pulsar en este botón anulamos el evento del anterior, de manera que el botón anterior deja de funcionar;

Observa que en el método removeEvent() debemos pasar como argumentos tanto el nombre del evento como el nombre de la función para que el método funcione.


Método fireEvent()

Una vez hemos aplicado un evento a un elemento, podemos hacer que se active su código asociado aunque no se produzca el evento, sino mediante el método fireEvent() Veamos un ejemplo:

Tenemos el siguiente div en HTML:

<div id="ejemplo1"><p>"Texto de muestra para el ejemplo 1"</p></div>

Este es un div al que no le hemos aplicado ningún estilo especial, así que en pincipio deberíamos verlo así:

"Texto de muestra para el ejemplo 1"

Ahora le aplicamos los siguientes eventos:

$("ejemplo1").addEvents({
   mouseover: function(){this.setStyles({"color":"red","border":"1px solid red","margin":"0.5em 3em"})},
   mouseout: function(){this.setStyles({"color":"blue","border":"1px solid blue","margin":"0.5em 3em"})}
});

Esto hace que al pasar el ratón por encima aparece un borde rojo y el texto en rojo, y al salir con el ratón el borde y el texto pasan a color azul. Sin embargo al abrir la página no hay ningun borde ni ningun color de texto especial.

Para hacer que este elemento aparezca al abrir la página de la misma manera que cuando el ratón sale de él, añadimos la siguiente línea:

$("ejemplo1").fireEvent("mouseout");

Este método lo aplicamos dentro de la estructura "domready", y después de haber definido el evento que pasamos como argumento. Este es el elemento una vez aplicados todos los métodos.

"Texto de muestra para el ejemplo 1"

Si este div se ve de color azul y con un borde al iniciar la página es gracias al método fireEvent(), que ha activado el evento al cargarse la página.


Método cloneEvents();

Este método copia los eventos de un elemento a los de otro, para ello tiene la siguiente sintaxis:

$("nuevo_elemento").cloneEvents($("viejo_elemento"));

Haremos ahora un "ejemplo2" en el que copiaremos los eventos del ejemplo anterior. Para ello creamos primero el div:

<div id="ejemplo2"><p>"Texto de muestra para el segundo ejemplo"</p></div>

Después le copiamos los eventos del ejemplo1:

$("ejemplo2").cloneEvents($("ejemplo1"));

Y para que sea igual que en el ejemplo 1 le aplicamos también el método fireEvent().

$("ejemplo2").fireEvent("mouseout");

Ahora el div del ejemplo 2 nos quedará así:

"Texto de muestra para el segundo ejemplo"


Eventos propios de Mootools

Además de los eventos propios de javascript, mootools tiene algunos eventos propios que realizan algunas acciones:

evento domready : Utilizado en la estructura "domready" que indica que el HTML de la página se ha cargado. Aunque se haya cargado el HTML es posible que otras partes de la página no se hayan cargado aún (imágenes, vídeos, elementos externos). Para asegurarnos que la página se ha cargado totalmente debemos usar el evento load en lugar de domready

evento mouseenter : El ratón entra dentro de un elemento. Está encima del elemento.

evento mouseleave : El ratón sale del elemento. Deja de estar encima del elemento

evento mouseweel : Se ha movido la rueda del ratón.

Al elemento de la derecha, con un id="capa1", le hemos aplicado el siguiente código, con los eventos mouseenter y mouseleave.

$("capa1").addEvents({
mouseenter: function(){this.setStyle("opacity","0.2");},
mouseleave: function(){this.setStyle("opacity","1");}
});






En la siguiente página veremos el objeto Event que nos proporciona información sobre el evento.

Objeto event.



Manual de Mootools (I Básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com