Kitpages - 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.

Navigation

Versions

Contactez-nous

Les évènements avec YUI 3