WebDev-FR

Actuellement, lorsque vous souhaitez placer un événement sur certains noeuds particuliers de votre page, par exemple tous les liens ayant une classe particulière, comment cela se passe-t-il ?

1. d’abord, vous attendez que le DOM soit complétement chargé afin d’être certain de ne pas louper certains noeuds supposés recevoir l’événement
2. ensuite, vous faites une recherche sur l’intégralité du DOM, soit via votre librairie javascript favorite, soit comme un grand avec vos petites patounes, afin de récupérer la liste des noeuds qui correspondent à votre recherche
3. une fois que vous avez votre collection de noeuds, vous faites une boucle dessus pour tous leur appliquer le même événement, par exemple sur le clic

La majorité des développements en JavaScript fonctionnent actuellement de cette manière et les librairies javascript sont conçues sur ce principe.

Reglib va à l’encontre de ce principe et adopte une approche qu’on pourrait considérer comme plus efficace et plus intelligente.

Le principe est plutôt simple :

1. le gestionnaire d’événement est appliqué sur le body et non pas sur les noeuds du DOM qui sont visés (par exemple nos liens qui ont la bonne classe)
2. lorsque l’utilisateur clic quelque part (et plus globalement lorsqu’il déclenche un événement), l’événement remonte vers le body grâce au mécanisme de propagation des événements,
3. lorsque le body reçoit l’événement, il vérifie s’il n’a pas une règle associé à la cible initiale de l’événement, si c’est le cas, il exécute la fonction associée.

Ce fonctionnement a plusieurs avantages non-négligeables :

• pas besoin d’attendre le chargement complet du DOM vu qu’on place le gestionnaire d’événement directement sur le noeud body, qui est l’un des premiers créé au chargement de la page
• pas de traitement lourd sur l’initialisation de la page étant donné qu’on ne boucle pas sur des collections de noeuds auxquels on doit appliquer un gestionnaire d’événement, on se contente de l’appliquer sur le body,
• inutile de réappliquer le gestionnaire d’événement lorsqu’on crée du contenu de façon dynamique, les événements déclenchés par le contenu créé dynamique remonteront eux aussi vers le body donc seront traités correctement,

Bon, on peut toutefois noter quelques défauts à ce mécanisme :

• Tous les événements passent dans la moulinette associée au body pour savoir si leur cible initiale correspond à l’une des règles placées sur le body et vu la quantité astronomique d’événements (en particulier ceux générés par les déplacements et les survols de la souris), ça en fait un paquet.
• On ne peut pas retirer facilement l’événement appliqué à un noeud particulier. Par exemple si vous avez un gestionnaire d’événement basé sur tous les noeuds qui respectent la règle “a.maClasse”, autrement dit tous les liens ayant pour classe “maClasse”, et que vous souhaitez désactiver l’événement sur un lien particulier ayant cette classe là (faire en sorte que le clic sur le lien ne marche qu’une seule fois par exemple), avec la méthode classique il suffit de retirer le gestionnaire d’événement basé sur le onclick du noeud en question mais avec Reglib, il faut soit faire en sorte que le noeud ne respecte plus la règle placée sur le body (on lui retire sa classe “maClasse” mais elle est peut-être nécessaire pour le design ou pour d’autres événements) soit ajouter une information au noeud pour que le gestionnaire d’événement ne s’exécute pas.

Quoiqu’il en soit ce mécanisme de gestion des événements est très prometteur et on peut supposer que les grandes librairies JavaScript vont rapidement proposer des fonctions pour utiliser ce système.

Une petite demo comparant la gestion d’un widget entre jQuery et Reglib.