Event Delegation ou comment utiliser la propagation des événements

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *