comparte el articulo 

Manejo de eventos con MooTools

Actualizado el 13/11/2012 < > 0 Comentarios

Resumen: Explicamos la manera en que MooTools maneja los eventos, así como la funcionalidad para añadir, remover y disparar dichos eventos.

Los eventos representan las líneas de comunicación entre los objetos de JavaScript y el usuario que interactúa con la página, sin ellos no habría manera de controlar el estado de dichos objetos y crear una experiencia dinámica. En definición, un evento es una acción llevada a cabo por el usuario, ante la cual el código puede responde realizando algún tipo de proceso, como por ejemplo, desplegar una ventana de alerta cuando se da un clic sobre algún elemento.

En MooTools, existen dos tipos de eventos por manejar, los eventos realizados sobre el DOM y los eventos personalizados. Los eventos del DOM, son aquellos que el navegador soporta de manera nativa, como click, load, blur, focus, mouseover, mouseleave, etc. Mientras que los eventos personalizados son aquellos que se disparan cuando tú así lo desees.

Añadir eventos

Existen dos maneras distintas de añadir eventos a nuestro código de MooTools, estas son utilizando los métodos “addEvent” y “addEvents”.

$('elemento').addEvent('click', function(){
	// Aquí iría el proceso a realizarse al dar clic
});

new Fx.Tween('elemento').addEvents({
	start: function(){
		// Aquí iría el proceso a realizarse cuando la animación comience
	},
	complete: function(){
		// Aquí iría el proceso a realizarse cuando la animación termine
	}
});

Hay que aclarar que en el segundo caso, estamos usando una clase que implementa eventos, por lo que estos pueden ser utilizados sin necesidad de llamar a la clase “addEvents”, en cambio solo se les añade el prefijo “on”.

new Fx.Tween('elemento', {
	onStart: function(){
		// Aquí iría el proceso a realizarse cuando la animación comience
	},
	onComplete: function(){
		// Aquí iría el proceso a realizarse cuando la animación termine
	}
});

O si se esta creando elementos de forma dinámica, las opciones de eventos se pueden añadir así también:

new Element('div',{
	id: 'evento',
	events: {
		click: function(){
			// Aquí iría el proceso a realizarse al dar clic
		},
		mouseenter: function(){
			// Aquí iría el proceso a realizarse al colocar el mouse sobre el elemento
		}
	}
});

Remover eventos

Una vez que hemos añadido una serie de eventos a nuestro código, es probable que deseemos removerlos, para ello se puede optar por una forma rápida y sencilla como la siguiente.

$('elemento').removeEvents('click');

Generalmente esto basta para realizar lo que estamos buscando, sin embargo, si deseamos remover una parte especifica y no todos los eventos del mismo tipo, podemos optar por utilizar un puntero que indique la función que utilizamos para añadir eventos. Para ello, haremos uso del segundo parámetro de la función “addEvent”, y en vez especificar una función sin nombre, podemos hacer el llamado de todas las funciones que deseemos.

var elemento = $('elemento'),
    funcion1 = function(){
      alert('1');
    },
    funcion2 = function(){
      alert('2');
    };

elemento.addEvent('focus', funcion1);
elemento.addEvent('focus', funcion2);

elemento.focus(); //esto arrojaría 2 alerts

elemento.blur();
elemento.removeEvent('focus', funcion1);
elemento.focus(); // esto arrojaría sólo 1 alert con el valor '2'

Disparar eventos

Si añades eventos a los elementos que componen tu página, puedes dispararlos cuando lo consideres necesario, de la siguiente manera:

var el = $('elemento');
el.addEvent('click', function(){ /* proceso */ });

// Cuando necesites llamarlo añades:
el.fireEvent('click');

Para disparar libremente los eventos dentro de una clase se puede optar por realizar lo siguiente:

var lawebera = new Class({
  Implements: [Options, Events],
  hazAlgo: function(){
    // proceso
    var arg = 'la webera';
    this.fireEvent('finish', arg);
  }
});

var foo = new lawebera;
foo.addEvent('finish', function(arg){
  alert(arg);
});
foo.hazAlgo();

Delegación de eventos y uso de pseudo eventos

La delegación de eventos consiste en un patrón, donde los eventos de los elementos son escuchados y se transmiten a sus hijos, de esa manera no hay necesidad de escuchar el evento para cada uno de los hijos de dicho elemento. Esto es de gran utilidad cuando se manejan varios elementos, o cuando hacemos uso de llamadas ajax o actualizaciones de página que hacen que el DOM sea dinámico.

$('elemento').addEvent('click:relay(li)', function(event, objetivo){
  alert(objetivo);
});

El anterior código se encargará de escuchar los clicks que se hagan al elemento, pero únicamente disparará la función en caso de que un elemento hijo de tipo li reciba el evento.

También podemos apreciar que en el código hicimos uso de un nombre de evento algo especial, ya que luce de igual manera que un pseudo selector de CSS. Este, es uno de los pseudo eventos que posee MooTools.

$('elemento').addEvent('click:once', function(){
	//El proceso solo pasará una vez
});

Si quisieras definir tus propios pseudo eventos, harías algo como esto:

Event.definicionPseudo('n-veces', function(split, fn, args){
  if (!fn.count) fn.count = 0;
  fn.apply(this, args);
  if (++fn.count == split.value) this.removeEvent(split.original, fn);
});

Publicado el 13/11/2012, última actualización 13/11/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras