Versions
14/12/2009 : Création
19/12/2012 : mise à jour liens
Contactez-nous
Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81
Les évènements avec YUI 3
Introduction
Prérequis : avoir lu et compris la page "Premiers pas avec YUI 3"
Il est souhaitable d'avoir regardé comment fonctionne les Nodes et NodeList .
Nous vous proposons une introduction très pratique (et assez peu théorique) du fonctionnement des évènements YUI 3.
La documentation officielles des évènements est : YUI 3 events
Vous pouvez creuser ce point dans screencast en anglais qui donne une vue d'ensemble et la théorie des évènements YUI 3 : Events Evolved (YUI Theater)
4 points principaux sont abordés dans cette page :
- s'abonner à un évènement du DOM
- les évènements domready, available, contentready
- la délégation
- s'abonner à un évènement de YUI3
- créer ses évènements (sera abordé dans les modules)
Avantages des évènements YUI 3
Pour la gestion des évènements, YUI 3 présente de nombreux avantages :
- Présente les évènements classiques du DOM en corrigeant les bugs des navigateurs. La syntaxe est proche de celle du DOM.
- Propose une syntaxe claire et normalisée
- La même syntaxe pour s'abonner à
- Un évènement du DOM
- Un évènement de YUI 3
- Un évènement à vous (on peut créer ses propres évènements)
- Propose un système d'amélioration des performances avec la délégation d'évènements (cf plus loin dans cette page)
Abonnement à un évènement du DOM
Prenons comme exemple le code HTML suivant avec une classe CSS "hidden" qui efface un élément du DOM.
<style> .hidden { display: none !important; } </style> <a id="myLink" xhref="titi.php"> Mon lien <span class="hidden">text à afficher</span> </a>
// initialisation classique de YUI 3 YUI().use("node", function(Y) { // on récupère le node correspondant au lien var el = Y.one("#myLink"); // on écoute un click sur le lien et on lance la // fonction fournie en paramètre el.on("click", function(e) { // on interdit le comportement par défaut e.preventDefault(); // on récupère l'élément sur lequel on a cliqué var myLink = e.currentTarget; // on supprime la classe "hidden" pour afficher le span myLink.one("span").removeClass("hidden"); }); });
Fonctions disponibles de l'objet event
Dans l'exemple ci-dessus on a vu le preventDefault() permettant d'interdire le comportement par défaut. Voyons tout ce qu'on peut faire d'autre.
Y.one("#myButton").on("click", function(e) { // empêche le comportement par défaut e.preventDefault(); // empêche la propagation de l'évènement aux nodes parents (bubble) e.stopPropagation(); // e.preventDefault() et e.stopPropagation() e.halt(); // élément cliqué var myButton = e.currentTarget; });
Evènement sur un groupe de nodes (NodeList)
On peut enregistrer facilement un évènement sur plusieurs éléments avec "on" sur un groupe de nodes (NodeList).
Y.all(".deleteButton").on("click", function(e) { // récupérer le node sur lequel l'internaute a cliqué var button = e.currentTarget; // à partir de ce node on fait le traitement });
Evènements "de base" domready, contentready, available, window.load
Pour faire des traitements sur le DOM, il faut attendre que les éléments sur lesquels on travaille soit disponibles sur la page.
Dans un navigateur standard, seul l'évènement onload est envoyé en standard quand le DOM est entièrement chargé et quand tous les fichiers attachés sont chargés (images, CSS,...)
YUI 3 propose 3 évènements suppémentaires
- domready : envoyé quand le dom est chargé. Peut souvent remplacer avantageusement window.load
- available : envoyé quand un élément du dom est chargé et disponible
- contentready : envoyé quand un élément du dom est chargé ainsi que l'élément qui le suit
// lance le callback quand #myDiv est disponible Y.on( "available", function (e) { // mon traitement }, "#myDiv" ); // lance le callback quand tout le dom est construit et dans un état stable Y.on("domready", function() { // mon traitement }); // lance le callback quand tous les éléments de la page sont chargés Y.one("window").on("load", function{ // mon traitement });
La délégation d'évènements, performances des évènements
La délégation a pour objectif d'améliorer les performances des évènements dans certains cas particuliers.
Prenons par exemple le code suivant :
<div id="myContainer"> <ul> <li id="nodeA">Node A</li> <li id="nodeB"><strong>Node B</strong> <em>selected</em></li> <li id="nodeC">Node C</li> </ul> </div>
L'objectif est d'enregistrer un évènement "click" sur tous les 'li'. Pour cela on peut soit utiliser la méthode classique, soit utiliser une délégation.
Voyons cela dans un exemple :
//// // méthode classique : //// Y.all("#myContainer li").on("click", function(e) { // on récupère le li cliqué var li = e.currentTarget; // on affiche une alerte alert("id du li="+li.get("id")); }); //// // méthode 2 : la délégation //// // il faut inclure le module event-delegate YUI().use("event-delegate", function(Y){ // enregistrer les évènements Y.delegate("click", myCallback, "#myContainer", "li"); // le callback var myCallback = function(e) { // le li cliqué var li = e.currentTarget; // l'élément réellement cliqué (le li lui même ou un descendant) var clickedElement = e.target; // le container dans lequel on fait la délégation var myContainer = e.container; // on affiche quelque chose... alert("li cliqué:"+li.get("id")); }; });
Comment marche la délégation, les évènements qui "bubble"
Dans YUI3, tous les évènements "bubble". Ce concept de "bubbling events" n'est pas spécifique à YUI 3, c'est un concept Javascript implémenté dans tous les navigateurs récents (mais potentiellement un peu buggué en standard, alors qu'avec YUI 3, c'est corrigé).
Le principe est que quand on clique sur un élément d'une page HTML, l'élément réellement cliqué reçoit l'évènement. Ensuite son père reçoit l'évènement, puis encore le père du père,... et ainsi de suite jusqu'au body.
Dans l'exemple ci-dessus, si un internaute clique sur "Node B", la balise "strong" reçoit un évènement "click" (il n'en fait rien). L'évènement est ensuite transféré à l'élément "li", puis au "ul" et enfin à la "div".
Et la délégation dans tout ça ? C'est simple. Pour gagner en performances, au lien de mettre un évènement "click" sur chaque "li", on met juste un évènement sur la "div" qui entoure tous les "li".
Quand la div reçoit l'évènement, YUI3 sait sur quel "li" était l'internaute et lance le callback avec les bonnes valeurs dans le paramètre "e". Au lieu d'enregistrer 3 évènement, on n'en a enregistré qu'un seul. Sur une liste de 50 "li", les performances sont potentiellement bien meilleures.
S'abonner à des évènements YUI3
Le système est le même qu'un abonnement à un évènement du DOM. Il faut juste aller voir la doc du composant YUI qui envoie l'évènement.
Prenons comme exemple une requête AJAX.
// il faut inclure le module YUI 3 io-base YUI().use("io-base", function (Y) { // s'inscrire à l'évènement Y.on("io:complete", myCallback);` //la définition du callback var myCallback = function(id,o) { // id de la transaction var id = id; // la réponse à la requête var data = o.responseText; }; // on lance la requête var request = Y.io("myGet.php?param=titi"); });
Créer ses évènements : à venir
Je mentionne ici qu'on peut créer ses propres évènements. On s'y abonne de la même façon que pour les évènements du DOM ou les évènements YUI.
On abordera ce point plus en détail dans un tutorial sur la création de modules ou de widget.
Commentaires
Note : on ne peut plus ajouter de commentaire sur ce site