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: 17

Visitas el mes pasado: 16

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 (IX)

El objeto Event

imagen mootools

Información del evento

En javascript al producirse un evento, podemos obtener información de algunas características del mismo mediante el objeto "event". Mootools simplifica la obtenciòn de este objeto, así como sus propiedades, las cuales nos proporcionan la información.

En mootools también podemos acceder al objeto "event", de una forma más fácil que en javascript. Para ello basta con poner un primer argumento en la función que controla el evento:

$("elemento").addEvent("mousemove",function(evento){
//Código de la función que ejecuta el evento ...
});

Observamos que la única diferencia con la ejecución de un evento es que en la función hemos puesto un primer argumento, que aquí lo hemos llamado evento.

Este primer argumento es el objeto "event", el cual lo utilizaremos dentro de la función para obtener información del evento. La información no la obtenemos del objeto event en si, sino de sus propiedades y métodos.

Las propiedades que podemos obtener las podemos clasificar según el tipo de información que nos dan. Tenemos los siguientes tipos de propiedades del objeto "event", y también algunos métodos:


Propiedades del ratón

Las propiedades del ratón que utiliza el obejto "event" son las siguientes:

Debemos diferenciar entre el documento o la página completa, y la ventana del navegador, o parte visible en el navegador de la página. Estos no coinciden si la página está desplazada mediante las barras de desplazamiento.

Veamos un ejemplo en el que vemos en todo momento la posición del raton. Para ello creamos primero un elemento en el código html:


Posición del ratón

Página:

Ventana:

<div id="capa1">
<h2>Posición del ratón</h2>
<p id="p1">Página: </p>
<p id="p2">Ventana: </p1>
</div>

Ahora con mootools-javascript escribiremos la posición del ratón en los párrafos de este elemento. El código es el siguiente:

document.addEvent("mousemove",function(evento){
docX=evento.page.x;
docY=evento.page.y;
venX=evento.client.x;
venY=evento.client.y;
$("p1").set("html","Página: Horizontal "+docX+", Vertical "+docY);
$("p2").set("html","Ventana: Horizontal "+venX+", Vertical "+venY);
});

Vemos el resultado de este ejemplo en el recuadro arriba a la derecha.


Propiedades del teclado

Las propiedades de teclado dan información sobre la tecla que se ha pulsado. Se utilizarán por tanto los eventos de teclado para este tipo de propiedades. Estas son:

Veamos un ejemplo: tenemos el siguiente código html:

<div id="capa2">
<h2>Pulsa una tecla:</h2>
<p id="p3">Codigo (code) : </p>
<p id="p4">Tecla (key) : </p>
<p id="p5">Mayus (shift) : </p>
<p id="p6">Ctrl (control) : </p>
<p id="p7">Alt (alt) : </p>
<p id="p8">Meta (meta) : </p>
</div>

Pulsa una tecla:

Codigo (code) :

Tecla (key) :

Mayus (shift) :

Ctrl (control) :

Alt (alt) :

Meta (meta) :

En los diferentes párrafos de este código pondremos la información del teclado, para ello ponemos el siguiente código en javascript-mootools (dentro del "domready"):

document.addEvent("keypress",function(evento){
$("p3").set("html","Código (code): "+evento.code);
$("p4").set("html","Tecla (key): "+evento.key);
$("p5").set("html","Mayus (shift): "+evento.shift);
$("p6").set("html","Ctrl (control): "+evento.control);
$("p7").set("html","Alt (alt): "+evento.alt);
$("p8").set("html","Meta (meta): "+evento.meta);
});

Ls propiedades anteriores funcionan igual con todos los eventos de teclado, (keydwoun, keyup, keypress).

La propiedad key devuelve siempre una cadena en minúsculas con el nombre de la tecla, por lo que si queremos saber si se ha pulsado la tecla mayúsculas debemos usar también la propiedad shift, para después pasar la cadena a mayúsculas (si es que queremos mostrarla así).


Métodos de event

evento.preventDefault() : Elimina el comportamiento por defecto del elemento al ejecutarse el evento. Por ejemplo, en los enlaces, al hacer click, el comportamiento por defecto es ir a la página del enlace. Pues con event.preventDefalut sobre el enlace, éste deja de ir a la página indicada y ejecuta el código de la función asociada al evento.

evento.stopPropagation() : Easta propiedad hace justo lo contrario de la anterior, es decir, aplicada sobre un enlace (evento click), la función asociada al evento deja de ejecutarse, sin embargo el comportamiento por defecto si se produce, por lo que el enlace nos llevará al destino indicado, sin habarse ejecutado el evento.

evento.stop() : Esta propiedad hace las dos cosas anteriores a la vez, es decir elimina el comportamiento por defecto y también interrumpe la ejecución de la función del enlace.

evento.target() : Esta propiedad nos devuelve el elemento sobre el que se está ejecutando el evento. Para obtener alguna información sobre el elemento devuelto, debemos tratarlo como un objeto elemento de mootools. por ejemplo, tenemos el siguiente elemento en html:

<p id="ver1">click para mi etiqueta: </p>

Ahora queremos ver qué etiqueta tiene el elemento al hacer un click sobre él. Este es el código:

$("ver1").addEvent("click",function(evento){
this.set("html","Mi etiqueta : "+evento.target.get("tag"))
});

El resultado sera parecido al siguiente elemento:

Clik para mi etiqueta:






En la siguiente página veremos el tratamiento que mootools da a los Arrays

Arrays



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