Créer des événements personnalisés
custom event en javascript html5
Le développeur a à disposition toute une série d’événements personnalisés en javascript. 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 pour créer les événements personnalisés en javascript
– connaitre javascript;
– savoir utiliser les événements en javascript.
Création d’un événement personnalisé en javascript (Custom Event)
L’objet javascript CustomEvent permet de créer vos propres événements. Il suffit d’instancier un objet javascript CustomEvent qui prend en paramètres :
– le nom que vous donnez à l’événement;
– un objet comporte 3 propriétés detail, bubbles et cancelable.
La propriété detail est un objet qui comporte 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, empêche la propagation de l’événement via la méthode stopPropagation().
let nomEvenement = new CustomEvent(
"nomEvenement",
{
detail: {
p1: "valeurP1",
p2: "valeurP2",
.....
pN: "valeurPN",
},
bubbles: true|false,
cancelable: true|false
}
);Exemple
// creation événement
let 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 s’abonne à un événement : un div, un bouton, une image, etc…..
Pour abonner un élément html, invoquez 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.
document.getElementById("idElementHtml").addEventListener("nomEvenement", nomFonctionAppelee);nomFonctionAppelee est 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
let eventDestination = document.getElementById("eventDestination");
eventDestination.addEventListener("monEvenement", function(event) {
console.log("Reception de l'evenement");
console.log(event.detail.message);
});Déclencher les événements personnalisés en javascript (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, sans déclenchement, il 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.
document.getElementById("cibleEvenement").dispatchEvent(nomEvenement);Exemple
// lancement de l'événement sur clic du bouton "Lancer Evénement"
let runEvent = document.getElementById("runEvent");
runEvent.addEventListener("click", function() {
console.log("Lancement de l'evenement");
document.getElementById("eventDestination").dispatchEvent(monEvenement);
});Le code
<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>
let monEvenement = new CustomEvent(
"monEvenement",
{
detail: {
message: "Hello World!",
time: new Date()
},
bubbles: true,
cancelable: true
}
);
let eventDestination = document.getElementById("eventDestination");
eventDestination.addEventListener("monEvenement", function(event) {
console.log("Reception de l'evenement");
console.log(event.detail.message);
});
let 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 sur les événements personnalisés en javascript. Le prochain article javascript : barre de progression pour chargement d’images propose de mettre en œuvre les événements personnalisés. Ceci dans le cadre d’un chargement d’images visualisé par le biais d’une barre de progression.
