Country / Dev

Il n’y a pas que Mootools dans la vie, il y a aussi JQuery. Et lui aussi a des trucs sympa qui sont malheureusement absents (pour l’instant) de Mootools. Par exemple sa version 1.3 a introduit les Live Events qui peuvent grandement faciliter la gestion des événements dans vos pages. Je l’ai donc adapté pour Mootools 1.2

Explication

Pour commencer, qu’est qu’ils appellent un « live event»  exactement ? Hé bien il s’agit d’un événement que vous assignez une seule fois dans votre page et qui est propagé à tous les éléments qui correspondent au sélecteur que vous avez indiqué, même si vous ajoutez d’autres éléments de ce type.

Concrètement : Vous avez dans votre page un lien :

<a class="event" href="#">My link</a>

Si j'assigne un événement à ce lien par la manière classique :

document.getElement('a.event').addEvent('click', function(e){
	alert('Alert');
});

Et si dans le futur j'en ajoute un second identique ou que je le supprime puis que je le recrée alors les nouveaux liens n'auront pas d'événement associés.

Hors avec les Live Events je peux assigner un événement à tous les liens qui ont la class "event" :

$(document.body).addLiveEvent('click', 'a.event', function(e){
	alert('Alert');
});

Peu importe les manipulations que je fais dessus plus tard dans ma page, les événements y resteront associés (à condition bien sûr qu'ils correspondent toujours au sélecteur (ici "a.event").

En fait, pour réussir cette performance, l'événement n'est associé qu'une fois au parent des éléments ciblés, ici body, et lors d'un click sur l'un de ses enfants, si celui-ci correspond au sélecteur, l'événement est exécuté (on appel ça la délégation d'événement).

Un des avantages, outre le fait de pouvoir ajouter/supprimer des éléments, est de n'avoir qu'un seul événement pour tous vos éléments similaires, ce qui peut potentiellement être un gain conséquent de performance et de mémoire dans votre application.

Code source de addLiveEvent

/*
 * Attach an event to an element and use bubbling to fire the event on the childs who match a CSS selector
 * 
 * Usage : parentElement.addLiveEvent(event, selector, function)
 * 
 * parentElement - The parent to bind
 * event - The event name to monitor ('click', 'mouseover', etc) without the prefix 'on'
 * selector - The CSS Selector the childs need to match
 * function - The function to execute
 * 
 * Example :
 * $(document.body).addLiveEvent('click', 'a', function(e){ alert('Alert'); });
 * 
 */
Element.implement({
	addLiveEvent: function(event, selector, fn){
		this.addEvent(event, function(e){
			var t = $(e.target);
			if (!t.match(selector)) return false;
			fn.apply(t, [e]);
		}.bindWithEvent(this, selector, fn));
	}
});

(oui, le commentaire est plus long que le code...)

Démo en ligne