Entendido.

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

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++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

MooTools (IX)

El objeto Event

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: indican información sobre el ratón, posición, etc.

• Propiedades del teclado: indican información sobre el teclado y las teclas que se han pulsado.

• Métodos del evento: Realizan alguna acción sobre el evento o el elemento al que le afecta.

Propiedades del ratón

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

• evento.page.x : Indica la distancia horizontal a la que está el puntero del ratón respecto al borde izquierdo del documento.
• evento.page.y : Indica la distancia vertical a la que está el puntero del ratón respecto al borde superior del documento.
• evento.client.x : Indica la distancia horizontal a la que está el puntero del ratón respecto al borde izquierdo de la ventana del navegador.
• evento.client.y : Indica la distancia vertical a la que está el puntero del ratón respecto al borde superior de la ventana del navegador.

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:

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

• evento.code : Devuelve el número del código de la tecla.
• evento.key : Devuelve la tecla pulsada en una cadena de texto. También devuelve teclas como "enter", "space", "tab", "up", "down", etc.
• evento.shift : Devuelve true si se ha pulsado la tecla de mayúsculas, si no devuelve false.
• evento.control : Devuelve true si se ha pulsado la tecla de control (ctrl), si no devuelve false.
• evento.alt : Devuelve true si se ha pulsado la tecla Alt, si no devuelve false.
• evento.meta : Devuelve true si se ha pulsado la tecla meta, si no devuelve false.

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>

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

Página creada por ANYELGUTI.

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

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

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