javascript : événements personnalisés custom event

 

Javascript met à disposition du développeur toute une série d’événements tels que le clic, le chargement d’une page, l’appui sur une touche. Javascript permet aussi au développeur de créer des événements personnalisés par le biais des CustomEvent. Je vous montre comment créer un événement, le lancer, et s’y abonner pour le capturer.

 

Pré-requis

– connaitre javascript;
– savoir utiliser les événements en javascript.

 

Création d’un événement personnalisé (Custom Event)

L’objet javascript CustomEvent permet de créer vos propres événements. Il suffit d’instancier un objet javascrpt CustomEvent qui prend en paramètres :
– le nom que vous donnez à l’événement;
– un objet comportant 3 propriétés detail, bubbles et cancelable.

La propriété detail est un objet comportant des informations relatives à l’événement que vous créez. Ces informations sont définies par le développeur selon ses besoins.

La propriété bubbles fixée à la valeur true permet la remontée de l’événement aux parents de l’élément qui a déclenché l’événement.

La propriété cancelable fixée à la valeur true, permet d’empêcher la propagation de l’événement via la méthode stopPropagation().

La forme:

var nomEvenement = new CustomEvent(
  "nomEvenement",
  {
    detail: {
      p1: "valeurP1",
      p2: "valeurP2",
      .....
      pN: "valeurPN",
    },
    bubbles: true|false,
    cancelable: true|false
  }
);

Exemple:

// creation événement
var monEvenement = new CustomEvent(
  "monEvenement",
  {
    detail: {
      message: "Hello World!",
      time: new Date()
    },
    bubbles: true,
    cancelable: true
  }
);

 

S’abonner un événement personnalisé (Custom Event)

Tout élément html peut s’abonner à un événement : un div, un bouton, une image, etc…..

Pour abonner un élément html, il suffit d’invoquer la méthode addEventListener qui prend en paramètres :
– l’événement auquel on s’abonne;
– le nom de la fonction au déclenchement de l’événement.

La forme:

document.getElementById("idElementHtml")addEventListener("nomEvenement", nomFonctionAppelee);

nomFonctionAppelee peut être un nom de fonction définie préalablement ou encore une fonction anonyme :

document.getElementById("idElementHtml")addEventListener("nomEvenement", function() {
});

Exemple :

// abonnement de l'élément html dont l'id est eventDestination à l'événement monEvenement
var eventDestination = document.getElementById("eventDestination");
eventDestination.addEventListener("monEvenement", function(event) {
  console.log("Reception de l'evenement");
  console.log(event.detail.message);
});

 

Déclencher un événement personnalisé (Custom Event)

Un événement doit être ciblé, sans quoi s’y abonner ne sert à rien.

Si un élément html H est abonné à un événement E sans qu’il en soit la cible, le déclenchement de l’événement ne génère aucun appel à la fonction désignée en paramètre de la méthode addEventListener : l’événement est ignoré.

Deux conditions à retenir :
– être la cible de l’événement;
– être abonné à l’événement.

La forme:

document.getElementById("cibleEvenement").dispatchEvent(nomEvenement);

Exemple:

// lancement de l'événement sur clic du bouton "Lancer Evénement"
var runEvent = document.getElementById("runEvent");
runEvent.addEventListener("click", function() {
  console.log("Lancement de l'evenement");
  document.getElementById("eventDestination").dispatchEvent(monEvenement);
});

 

Code source de l’exemple

 

<html>
  <head>
    <title></title>
  </head>
  <body>
    <input id="runEvent"  type="button" value="Lancer Evenement"><br>
    <input id="eventDestination"  type="button" value="Destinataire evenement">
  </body>
<script>
// creation événement
var monEvenement = new CustomEvent(
  "monEvenement",
  {
    detail: {
    message: "Hello World!",
    time: new Date()
    },
  bubbles: true,
  cancelable: true
  }
);

// abonnement du bouton "Destinaitaire événement" à l'événement
var eventDestination = document.getElementById("eventDestination");
eventDestination.addEventListener("monEvenement", function(event) {
  console.log("Reception de l'evenement");
  console.log(event.detail.message);
});

// lancement de l'événement sur clic du bouton "Lancer Evénement"
var runEvent = document.getElementById("runEvent");
runEvent.addEventListener("click", function() {
  console.log("Lancement de l'evenement");
  document.getElementById("eventDestination").dispatchEvent(monEvenement);
});
</script>
</html>

 

Maintenant, vous savez tout. Le prochain article javascript : barre de progression pour chargement d’images propose de mettre en œuvre les événements personnalisés dans le cadre d’un chargement d’images visualisé par le biais d’une barre de progression.

 

Posté dans html5Taggé CustomEvent, javascript custom event, javascript événement personnalisé  |  1 commentaire

Une réponse à "javascript : événements personnalisés custom event"

Répondre