Aqui podrás encontrar varios ejemplos sobre como aplicar eventos con Mootools. Cada uno de los ejemplos muestra como funcionan los métodos para agregar, remover, disparar y detener eventos. También podrás encontrar formas de acceder a algunas propiedades de cada evento.

Podés ver la explicación completa sobre eventos con Mootools en mi blog, donde también podrás encontrar mas información, ejemplos y tutoriales sobre Mootools en Castellano como asi también sobre algunos otros temas.

Suscribite a mi blog para recibir articulos directamente en tu lector de Feeds favorito.

Element.Event.js

addEvent

  1. $('uno').addEvent('click', function()
  2. {
  3. 	$('prueba-uno').appendText(' Elemento 1 clickeado ');
  4. });
Click
  1. funcion = function()
  2. {
  3. 	$('prueba-dos').appendText(' Elemento 2 clickeado ');
  4. };
  5. $('dos').addEvent('click', funcion);
Click

addEvents

  1. $('tres').addEvents(
  2. {
  3. 	'click': function()
  4. 	{
  5. 		$('prueba-tres').appendText(' Elemento 3 clickeado ');
  6. 	},
  7. 	'mouseenter': function()
  8. 	{
  9. 		$('prueba-tres').appendText(' El cursor paso por el elemento 3 ');
  10. 	}
  11. });
Click

removeEvent

  1. funcion2 = function()
  2. {
  3. 	$('prueba-cuatro').appendText(' Elemento 4 clickeado ');
  4. 	$('cuatro').removeEvent('click', funcion2);
  5. };
  6. $('cuatro').addEvent('click', funcion2);
  7. //El mensaje se mostrara solo en el primer click, luego se borra el evento 
  8.
Click
  1. funcion3 = function()
  2. {
  3. 	$('prueba-cinco').appendText(' Elemento 5 clickeado ');
  4. 	$('cinco').removeEvent('click', funcion3);
  5. };
  6. funcion4 = function()
  7. {
  8. 	$('prueba-cinco').appendText(' y otro click ');
  9. };
  10. $('cinco').addEvent('click', funcion3);
  11. $('cinco').addEvent('click', funcion4);
  12. //Agregamos dos eventos y luego del primer click borramos uno de ellos. 
  13.
Click

fireEvent

  1. $('seis').addEvent('click', function()
  2. {
  3. 	$('prueba-seis').appendText(' Elemento 6 clickeado ');
  4. });
  5. $('seis').addEvent('click', function()
  6. {
  7. 	$('prueba-seis').appendText(' y otro click ');
  8. });
  9. $('seis').addEvent('click', function()
  10. {
  11. 	$('prueba-seis').appendText(' mas ');
  12. });
  13. $('seis').fireEvent('click');
  14. //Sin hacer click en ningun elemento se ejecutan las 3 funciones. 
  15.
Click
  1. $('siete').addEvent('click', function(evento)
  2. {
  3. 	$('prueba-siete').appendText(' Elemento 7 clickeado ' + evento.valor);
  4. });
  5. $('siete').fireEvent('click', {valor: 'por primera vez '});
  6. //Pasamos un parametro junto con fireEvent 
  7.
Click
  1. $('ocho').addEvent('click', function(evento)
  2. {
  3. 	$('prueba-ocho').appendText(' Elemento 8 clickeado ' + evento.valor + evento.otroValor);
  4. });
  5. $('ocho').fireEvent('click', 
  6. {
  7. 	valor: 'por primera vez ', 
  8. 	otroValor: ':D '
  9. });
  10. //Tambien se pueden pasar varios parametros en un objeto. 
  11.
Click
  1. $('nueve').addEvent('click', function(evento)
  2. {
  3. 	$('prueba-nueve').appendText(' Elemento 9 clickeado ' + evento.valor);
  4. });
  5. $('nueve').fireEvent('click', {valor: 'por primera vez '}, 1000);
  6. //Indicamos una espera de 1000 milisegundos antes de disparar el evento con fireEvent 
  7.
Click

cloneEvents

  1. $('diez').cloneEvents($('nueve'));
  2. //Observa los resultados en el ejemplo anterior a este. 
  3.
Click

Ejemplo para comenzar

  1. $('eventos').addEvent('click', function(evento)
  2. {
  3. 	//creamos una instancia de Event
  4. 	var ev = new Event(evento);
  5. 	$('eventos-prueba').empty();
  6. 	var ul = new Element('ul');
  7. 	//y accedemos a algunas de sus propiedades
  8. 	ul.adopt(new Element('li').appendText('shift ' + ev.shift));
  9. 	ul.adopt(new Element('li').appendText('control ' + ev.control));
  10. 	ul.adopt(new Element('li').appendText('alt ' + ev.alt));
  11. 	ul.adopt(new Element('li').appendText('meta ' + ev.meta));
  12. 	ul.adopt(new Element('li').appendText('page.x ' + ev.page.x));
  13. 	ul.adopt(new Element('li').appendText('page.y ' + ev.page.y));
  14. 	ul.adopt(new Element('li').appendText('client.x ' + ev.client.x));
  15. 	ul.adopt(new Element('li').appendText('client.y ' + ev.client.y));
  16. 	ul.adopt(new Element('li').appendText('target ' + ev.target));
  17. 	ul.adopt(new Element('li').appendText('relatedTarget ' + ev.relatedTarget));
  18. 	$('eventos-prueba').adopt(ul);
  19. });
Click
  1. $('padre-once').addEvent('click', function()
  2. {
  3. 	alert('Padre');
  4. });
  5. $('hijo-once').addEvent('click', function()
  6. {
  7. 	alert('Hijo');
  8. });
  9. $('once').addEvent('click', function(ev)
  10. {
  11. 	alert('Enlace');
  12. });
  13. //Al hacer click en el enlace se disparan todos los eventos click de los elementos que lo contienen
  14. //y se abre la url del enlace 
  15.
Enlace
Hijo
Padre

Event.keys

  1. Event.keys.bloqNum = 144;
  2. //Agregamos la tecla bloqNum, cuyo codigo es 144
  3. $('quince').addEvent('keydown', function(evento)
  4. {
  5. 	ev = new Event(evento);
  6. 	$('prueba-quince').appendText(ev.key);
  7. });
  8. $('quince-reset').addEvent('click', function(ev)
  9. {
  10. 	new Event(ev).stop();
  11. 	$('prueba-quince').empty();
  12. 	$('quince').setProperty('value', '');
  13. });
Reset

Event.preventDefault()

  1. $('padre-doce').addEvent('click', function()
  2. {
  3. 	alert('Padre');
  4. });
  5. $('hijo-doce').addEvent('click', function()
  6. {
  7. 	alert('Hijo');
  8. });
  9. $('doce').addEvent('click', function(ev)
  10. {
  11. 	var event = new Event(ev);
  12. 	alert('Enlace');
  13. 	event.preventDefault();
  14. });
  15. //Sucede lo mismo que en el ejemplo anterior, pero sin abrir la url del enlace 
  16.
Enlace
Hijo
Padre

Event.stop()

  1. $('padre-trece').addEvent('click', function()
  2. {
  3. 	alert('Padre');
  4. });
  5. $('hijo-trece').addEvent('click', function()
  6. {
  7. 	alert('Hijo');
  8. });
  9. $('trece').addEvent('click', function(ev)
  10. {
  11. 	var event = new Event(ev);
  12. 	event.stop();
  13. 	alert('Enlace');
  14. });
  15. //Se dispara el evento del enlace sin abrir su url y se cancelan los eventos de los otros elementos contenedores 
  16.
Enlace
Hijo
Padre

Event.stopPropagation()

  1. $('padre-catorce').addEvent('click', function()
  2. {
  3. 	alert('Padre');
  4. });
  5. $('hijo-catorce').addEvent('click', function()
  6. {
  7. 	alert('Hijo');
  8. });
  9. $('catorce').addEvent('click', function(ev)
  10. {
  11. 	var event = new Event(ev);
  12. 	event.stopPropagation();
  13. 	alert('Enlace');
  14. });
  15. //Igual que el ejemplo anterior, pero SI se abre la url del enlace 
  16.
Enlace
Hijo
Padre