Una clase que nos ayuda a realizar tareas avanzadas con eventos en Mootools. Explicaremos la clase Native Event, cómo utilizarla y cómo parar la ejecución y propagación de eventos.
En Mootools, cuando definimos un evento, especificamos el código de una función para definir el comportamiento de ese evento frente a la acción del usuario. Esa función recibe un parámetro que es el propio evento que se ha producido. Ese parámetro es un objeto de la clase Native Event, que tiene algunos datos interesantes, con los que podemos trabajar, así como algunos métodos para realizar acciones que seguramente necesitaremos en algún momento.
Veamos un código para definir un evento:
window.addEvent("domready", function(){
document.addEvent("click", function(evento){
alert("Has pulsado sobrenX:" + evento.client.x + "nY:" + evento.client.y);
});
});
En realidad aquí hemos definido dos eventos. Uno para cuando la página está lista para trabajar con el DOM de Javascript (evento domready) y otro para cuando se hace clic en el documento (evento click). El evento domready ya lo hemos visto repetidas veces en el manual de Mootools, por lo que no debería presentarnos dudas. Quiero que se preste atención en la definición del evento "click", justamente en la función que se declara para codificar el comportamiento del evento. Esa función, como se puede ver, recibe un parámetro, que es el objeto evento (de la clase Event), que explicaremos ahora.
Propiedades de la clase Event
El objeto evento tiene varias propiedades y métodos que nos sirven para saber cosas sobre el evento que está ejecutándose y para solicitar acciones sobre ese evento.Las propiedades son las siguientes:
- shift - (boleano) Verdadero si el usuario pulsó la tecla mayúsculas (shift)
- control - (boleano) Verdadero si el usuario había presionado la tecla control (CTRL)
- alt - (boleano) Verdadero si el usuario había pulsado la tecla alternativa (ATL)
- meta - (boleano) Verdadero si el usuario pulsó la tecla meta
- wheel - (número) La cantidad de movimiento realizado con la rueda del ratón
- code - (número) el código de la tecla pulsada
- page.x - (número) La posición x del ratón, relativa a la página completa
- page.y - (número) La posición y del ratón, relativa a la página completa
- client.x - (número) La posición x del ratón, relativa a porción de página visible
- client.y - (número) La posición y del ratón, relativa a la porción de página visible
- key - (cadena) La tecla pulsada, como una cadena en minúsculas. La cadena que se muestre al pulsar una tecla puede ser también 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', y 'esc'.
- target - (elemento) El elemento que es objetivo de ese evento, pero sin estar extendido con las funcionalidades de $(), por razones de rendimiento.
- relatedTarget - (elemento) El elemento relacionado con el objetivo del evento, sin extender con la función $().
document.addEvent("click", function(evento){
alert("Has pulsado sobrenX:" + evento.client.x + "nY:" + evento.client.y);
});
Como se puede ver, se añade un evento al objeto document, con lo que conseguiremos hacer un evento para todo el documento de la página y no asociado a un elemento en concreto, como habíamos visto en otras ocasiones en el manual. Este evento click, por tanto, se disparará al hacer clic en cualquier parte de la página.
Veamos que se declara una función, que tiene como parámetro una variable llamada "evento" ese evento es de la clase Event y tiene las propiedades que hemos comentado antes, por lo tanto puedo utilizarlas para hacer cosas. En este código muestro la posición del ratón al hacer clic, relativa a la porción de página visible en ese momento.
Podemos ver el ejemplo en marcha en una página aparte.
Métodos de la clase Event
Ahora veremos los eventos disponibles para la clase Native Event.
Método stop()
Este método sirve para parar un evento y evitar la propagación del mismo. Por ejemplo, pensemos en un enlace. Si hacemos clic nos lleva a una nueva URL. Entonces con Mootools podríamos ejecutar acciones cuando se hace clic en el enlace y luego parar el evento con stop(), para que no se produzca el comportamiento típico del enlace, con lo que no nos llevaría a la nueva URL.
Por ejemplo, tenemos un enlace como este:
<a href="https://desarrolloweb.com" id="mienlace">desarrolloweb.com</a>
Y ahora definiremos un evento clic sobre el enlace con Mootools:
window.addEvent("domready", function(){
$("mienlace").addEvent("click", function(evento){
evento.stop();
alert("Has hecho clic sobre el enlace... pero no te vamos a llevar al destino");
});
});
Como se ha podido ver, en la codificación del evento click sobre el enlace anterior (elemento "mienlace"), lo primero que se hace es un evento.stop(), con lo que se para el comportamiento típico del enlace y también se detiene la propagación del mismo. El resultado es que nos mostrará el mensaje de la función alert(), pero no se nos llevará a la página definida en el href del enlace.
Podemos ver el ejemplo del método stop() en una página aparte.
Métodos stopPropagation() y preventDefault()
Ahora veremos otros dos eventos que también nos pueden ser útiles en algunos casos. Son métodos para hacer cosas parecidas a lo que vimos en el ejemplo anterior del método stop(). Pero para entenderlos tengo que explicar algo más sobre la propagación de eventos.
Imaginemos que tenemos definidos dos eventos click en nuestra página. Un evento click está definido sobre un enlace, como hemos visto antes, y otro evento click está definido sobre el documento completo. Cuando un usuario hace clic sobre el enlace, primero se desata el evento click que habíamos definido en el enlace. Luego el evento se propaga y llega al documento completo, donde hay definido otro evento click, con lo que se ejecuta también ese evento definido para todo el documento.
Eso lo conseguiríamos con un código como este:
window.addEvent("domready", function(){
document.addEvent("click", function(evento){
alert("Has pulsado sobrenX:" + evento.client.x + "nY:" + evento.client.y);
});
$("mienlace").addEvent("click", function(evento){
alert("Has hecho clic sobre el enlace... ");
});
});
Si ejecutamos ese ejemplo en una página aparte, podemos apreciar que los dos eventos clic se ejecutan al pulsar sobre el enlace. Con esto podemos comprender cómo se realiza la propagación de eventos y de paso entender las siguientes explicaciones sobre los métodos de Event stopPropagation() y preventDefault().
Si hacemos un PreventDefault(), dentro del evento click del enlace, conseguiríamos que simplemente no se ejecutase el comportamiento por defecto del enlace, con lo que no nos llevaría a la URL del enlace.
Si hacemos un stopPropagation(), dentro del evento click del enlace, el resultado será que no se propagará el evento, con lo que si hacemos un clic en el enlace se ejecutará el evento del enlace pero no el definido para todo el documento, porque se ha parado la propagación. Nótese que el comportamiento por defecto del enlace sí se produce, por lo que el navegador nos llevará a la nueva URL que había en el href del enlace.
Por su parte, stop() haría las dos cosas a la vez, detendría la propagación del evento y además no se ejecutaría el comportamiento por defecto del enlace.
Fijémonos en este código con el que podríamos haber definido el evento click del enlace, que hace uso de los tres métodos, aunque están comentados.
$("mienlace").addEvent("click", function(evento){
alert("Has hecho clic sobre el enlace... ");
//evento.preventDefault(); //esto hace que no se lleve al enlace
//evento.stopPropagation(); //esto hace que no se propague el evento clic definido para todo el documento
//evento.stop(); //no hay ni propagación del evento ni comportamiento por defecto del evento
});
Para acabar con los eventos de Mootools habría que tratar con algunos eventos de teclado, para realizar acciones cuando el usuario presiona teclas del teclado, que tienen algunas particularidades interesantes para aprender a programar.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...