De prime abord la gestion des événements en javascript semble assez simple. Cependant cela devient un peu plus pointu dès que l’on veut optimiser les performances.

L’un des problèmes que l’on rencontre souvent est une page lente à charger et consommant beaucoup de mémoire à cause de nombreux événements à charger.

Le cas classique est un tableau avec des événements sur chaque case du tableau. Si on à un tableaux de 10×10 celà nous fait … 100 événements à attacher.

Pour solutionner le problème et gagner énormément de temps la délégation d’événement ou Event delegation permet de se baser sur la propagation des événements pour n’en utiliser qu’un seul.
Ainsi on attache un événement sur l’élément père et on conditionne le traitement lors de la capture.
Voici un avant/après avec prototype permettant d’attacher un événement sur tous les éléments ayant la classe « change » :

Avant :

$$('.change').each(function(elem){Event.observe(elem,'click',function(){alert('Capture')})});

Ici on passe en revu tous les éléments de la page pour trouver tout ceux ayant la classe « change » et on leur attache un événement particulier.

Avec la délégation d’événement , on à un peu plus de code mais c’est nettement plus rapide :
Après :

Event.observe($('container'),'click',function(e){if(e.element().hasClassName('change')) alert('Capture');});

On attache donc un seul et unique événement sur le conteneur des éléments devant recevoir l’événement. L’événement se propageant les éléments fils , le reçoivent également. Il ne reste donc plus qu’à conditionner le code pour que l’action de l’événement ne s’exécute que sur les class choisie.

Un des gros avantages avec les librairies javascript telles que prototype , jquery ou encore mootools c’est leur système de sélection d’élément dans le DOM.
Par exemple pour sélectionner tous les liens avec la class css « clickme » il suffit de faire :
[javascrip]var elements = $$(‘a.clickme’);[/javascript]
La syntaxe peut varier d’une librairie à l’autre mais dans l’esprit tout est récupérable avec de simples sélecteurs css.
Le problème étant qu’intégrer une librairie de plusieurs kilos pour une simple sélection est une mauvaise idée.
Voici donc une petite fonction getElementsbyClassName en javascript natif qui comme le selecteur $$ permet de retrouver tous les tags d’une page portant une class spécifique.

<pre>/**
* Récupère les éléments d'une classe précise
* @param string tag Nom de la balise
* @param string cssClass Nom de la class Css
* @return array
*/
function getElementByClassName(tag,cssClass){

var foundElements     = new Array();
var allElements        = document.getElementsByTagName(tag);
for(var i=0;i<allElements.length;i++)
    if(allElements[i].className == cssClass)
        foundElements.push(allElements[i]);

return foundElements;
}</pre>

Cette fonction renvoi donc un tableau des éléments retrouvés dans la page. Très simple elle ne prend cependant pas en compte les éléments avec plusieurs class css , mais c’est très facilement intégrable 🙂