JOURMOLY

Element.event nos facilita la tarea de manejar los eventos de usuario ademas de proporcionarnos métodos para trabajar con nuestros elementos. Como siempre toda esta explicacion esta acompañada por una serie de ejemplos que te recomiendo que veas: Eventos con Mootools.

Agregando Eventos

addEvent(evento, función)
Es un método que ya venimos utilizando seguido, nos permite agregar un evento a un elemento.

1
2
3
4

$('elemento').addEvent('click', function()
{
	alert('Mi elemento fue clickeado');
});

Con el código anterior añade un evento onClick a nuestro elemento. Los eventos que se pueden utilizar son los de javascript, pero sin el prefijo on. El segundo parámetro es la función que se ejecutara cuando se dispare el evento, en este caso cuando se haga click sobre elemento. Lo mismo de otra manera:

1
2
3
4
5

miFuncion = function()
{
	alert('Mi elemento fue clickeado');
};
$('elemento').addEvent('click', miFuncion);

Este código hace exactamente lo mismo que el del primer ejemplo, con la diferencia de que en este caso nos quedamos con una referencia de la función, la cual nos servirá si deseamos remover nuestro evento con removeEvent.

Por otro lado, addEvent nos da la posibilidad de agregar varios eventos del mismo tipo sobre un mismo elemento.

1
2
3
4
5
6
7
8
9
10
11
12
13

miFuncion = function()
{
	alert('Mi elemento fue clickeado');
};
$('elemento').addEvent('click', miFuncion);
 
$('elemento').addEvent('click', function()
{
	alert('Mi elemento fue clickeado 2 veces');
});
//Salida
//Mi elemento fue clickeado
//Mi elemento fue clickeado 2 veces

addEvents(objeto)
Nos permite agregar varios eventos a un elemento pero en un solo paso. Los eventos con sus funciones correspondientes se indican en un simple objeto.

1
2
3
4
5
6
7
8
9
10
11

$('elemento').addEvents(
{
	'click': function()
	{
		alert('Mi elemento fue clickeado');
	},
	'mouseenter': function()
	{
		alert('El cursor está sobre mi elemento');
	}
});

Quitando eventos

removeEvent(evento, función)
Al contrario que addEvent, este método nos permite eliminar un evento. Para ello debemos indicar el evento que queremos remover y la referencia hacia la función que ejecutaba dicho evento.

1
2
3
4
5
6
7

miFuncion = function()
{
	alert('No me enteraré si mi elemento es clickeado');
};
$('elemento').addEvent('click', miFuncion);
//removemos el evento click
$('elemento').removeEvent('click', miFuncion);

removeEvents(evento)
Nos permite remover todos los eventos de un mismo tipo. El único parámetro que debemos indicar es el nombre del evento que queremos remover. Si no indicamos un evento, se borran todos. A diferencia de removeEvent, no hace falta indicar la referencia a las funciones de cada evento.

1
2
3
4
5
6
7
8
9
10

$('elemento').addEvent('click', function()
{
	alert('Click');
});
$('elemento').addEvent('click', function()
{
	alert('Otro Click');
});
//removemos todos los eventos click
$('elemento').removeEvents('click');

Ahora bien, mientras escribo esto lo estoy probando y no me funciona correctamente por lo menos en Mozilla Firefox. Leí un poco el foro oficial y los tickets y al parecer hay un pequeño error en este método en la versión 1.11 de Mootools. Por suerte, ya esta corregido en la versión en desarrollo. Si estás apurado y necesitas que funcione ya mismo, podes bajarte la versión en desarrollo, tomar el código de este método e implementarlo(ver implement) en la versión de Mootools que estés usando.

Más métodos para nuestros elementos

fireEvent(evento, parámetros, delay)
Nos permite disparar un evento manualmente(por decirlo de alguna manera). No importa que nadie haga click sobre nuestro elemento, con fireEvent podemos hacer que se ejecute la función correspondiente al evento click o cualquier otro.

1
2
3
4
5
6
7
8

$('elemento').addEvent('click', function()
{
	alert('Mi elemento fue clickeado... creo.');
});
$('elemento').fireEvent('click');
//Salida
//Mi elemento fue clickeado... creo.
//Sin que hagamos click

Y también podemos indicar parámetros para nuestra función de la siguiente manera:

1
2
3
4
5
6
7
8
9
10

$('elemento').addEvent('click', function(evento)
{
	alert('Mi elemento fue clickeado ' + evento.valor + evento.otroValor);
});
$('elemento').fireEvent('click',
{
	//aqui van todos los parametros
	valor: 'por primera vez ',
	otroValor: ':D '
});

Por último, el tercer parámetro nos permite indicar un tiempo en milisegundos que será una pausa antes de disparar el evento.

1
2
3
4
5
6
7
8
9
10

$('elemento').addEvent('click', function(evento)
{
	alert('Mi elemento fue clickeado ' + evento.valor + evento.otroValor);
});
$('elemento').fireEvent('click',
{
	valor: 'por primera vez ',
	otroValor: ':D '
}, 1000);
//1000 milisegundos de delay

cloneEvents(elementoOriginal, tipoEvento)
Con cloneEvents podemos copiar todos los eventos de un elemento a otro elemento. Opcionalmente podemos indicar un tipo de evento si deseamos que solo se copie un solo tipo de evento, por ejemplo click.

1
2
3
4
5
6

$('elemento').addEvent('click', function(evento)
{
	alert('Mi elemento fue clickeado');
});
$('otroElemento').cloneEvents($('elemento'));
//otroElemento tiene el mismo evento click que elemento

Clase Event

Con la clase Event podremos acceder a las siguientes propiedades cada vez que es disparado un evento:

• shift: true si el usuario presiona la tecla shift.
• alt: true si el usuario presiona la tecla alt.
• meta: true si el usuario presiona la tecla meta.
• wheel: Un valor indicando cuanto se ha scroleado con “la ruedita del mouse” (Mas claro imposible ).
• code: El código de la tecla presionada.
• page.x: Posicion x del puntero con respecto a toda la ventana, incluyendo lo que has scroleado.
• page.y: Posicion y del puntero con respecto a toda la ventana, incluyendo lo que has scroleado.
• client.x: Posicion x del puntero con respecto a la ventana, sin incluir el espacio scroleado.
• client.y: Posicion y del puntero con respecto a la ventana, sin incluir el espacio scroleado.
• key: El nombre de la tecla presionada: a, z, alt, right, left, etc.
• target: El elemento al cual se le aplico el evento.
• relatedTarget: ?.

Para utilizar estas propiedades debemos crear una instancia de Event con el parámetro que recibe la función de nuestro evento.

1
2
3
4
5

$('elemento').addEvent('click', function(evento)
{
	var ev = new Event(evento);
	alert('shift:' + ev.shift);
});

evento.preventDefault
Cancela solo el evento predefinido de nuestro elemento. Por ejemplo el “evento predefinido” de un enlace es abrir la dirección contenida en el atributo href. Si creamos un evento click sobre un enlace y le aplicamos preventDefault el navegador no abrirá la url del enlace, pero si ejecutará la función de nuestro evento y de todos los eventos que sean necesarios. Si tenemos un enlace dentro de un div y ambos elementos (enlace y div) poseen eventos de tipo click, al hacer click sobre el enlace se disparará el evento del enlace y del div también pero no se abrirá la url del enlace.

Dado el siguiente código HTML:

1
2
3
4
5

<div id="padre">
	<div id="hijo">
		<a href="http://www.jourmoly.com.ar" id="enlace">Enlace</a>
	</div>
</div>

y el siguiente código javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$('padre').addEvent('click', function()
{
	alert('Padre');
});
$('hijo').addEvent('click', function()
{
	alert('Hijo');
});
$('enlace').addEvent('click', function(ev)
{
	var event = new Event(ev);
	alert('Enlace');
	event.preventDefault();
});

La salida generada es:

1
2
3
4

//Enlace
//Hijo
//Padre
//El navegador no abre la url

evento.stop
Con stop evitamos que se disparen los otros eventos ajenos a nuestro elemento y al mismo tiempo se aplica preventDefault, por lo que en el caso de un enlace, el navegador no abrirá la url.

Tomando el código HTML del ejemplo anterior y el siguiente código javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$('padre').addEvent('click', function()
{
	alert('Padre');
});
$('hijo').addEvent('click', function()
{
	alert('Hijo');
});
$('enlace').addEvent('click', function(ev)
{
	var event = new Event(ev);
	alert('Enlace');
	event.stop();
});

La salida generada es:

1
2

//Enlace
//El navegador no abre la url

evento.stopPropagation
Hace exactamente lo mismo que stop pero sin aplicar preventDefault, es decir que en el caso del enlace el navegador si abriria la url.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$('padre').addEvent('click', function()
{
	alert('Padre');
});
$('hijo').addEvent('click', function()
{
	alert('Hijo');
});
$('enlace').addEvent('click', function(ev)
{
	var event = new Event(ev);
	alert('Enlace');
	event.stopPropagation();
});

La salida generada es:

1
2

//Enlace
//El navegador SI abre la url

Agregando teclas
Es posible que no todos los nombres de las teclas se muestren con la propiedad event.key. Si encontrás que falta una tecla podés agregarla muy fácilmente de la siguiente manera:

1
2
3
4
5
6
7

//Agregamos bloqNum
Event.keys.bloqNum = 144;
$('elemento').addEvent('keydown', function(evento)
{
	ev = new Event(evento);
	alert(ev.key);
});

Cuando presiones bloqNum, el valor de ev.key será bloqNum

bindWithEvent(elemento)
Básicamente, nos evita tener que crear una instancia de Event, recibimos dicha instancia en el parámetro de la función que se ejecuta cuando se dispara el evento.

1
2
3
4

$('elemento').addEvent('keydown', function(ev)
{
	alert('tecla: ' + ev.key);
}.bindWithEvent($('elemento')));

Y eso es todo, no olvides revisar los ejemplos para aclarar tus dudas: Eventos con Mootools.

Popularity: 9% [?]

Otros artículos

• Mootools y el DOM
• Pronto volvere a publicar nuevos artículos
• Paginación de artículos en Wordpress
• Mootools
• Zend Server: Instalar Apache, PHP y MySQL