Angular

Appearance

Les événements ​

La gestion des événements en JavaScript est un aspect essentiel de l'interaction avec la page Web. Le constructeur new Event() est une façon de créer des événements personnalisés qui peuvent ensuite être déclenchés dans le DOM.

Création d'un Événement ​

Pour créer un nouvel événement, utilisez new Event(typeArg, eventInit) où typeArg est une chaîne de caractères représentant le nom de l'événement et eventInit est un objet optionnel d'options d'initialisation.

javascript
let monEvenement = new Event("monEvenementCustom", {"bubbles": true, "cancelable": false});
let monEvenement = new Event("monEvenementCustom", {"bubbles": true, "cancelable": false});

Dans cet exemple, monEvenementCustom est le nom de l'événement. Les options indiquent que l'événement se propage dans la phase de capture et de bouillonnement, mais qu'il n'est pas annulable.

Écoute des Événements ​

Pour répondre à un événement, vous utilisez addEventListener sur un élément.

javascript
document.getElementById("monElement").addEventListener("monEvenementCustom", function(e) {
    console.log("Événement custom déclenché !");
});
document.getElementById("monElement").addEventListener("monEvenementCustom", function(e) {
    console.log("Événement custom déclenché !");
});

Déclenchement d'un Événement ​

Vous pouvez déclencher l'événement sur un élément avec la méthode dispatchEvent.

javascript
document.getElementById("monElement").dispatchEvent(monEvenement);
document.getElementById("monElement").dispatchEvent(monEvenement);

Exemple Complet ​

javascript
// Création de l'événement
let monEvenement = new Event("monEvenementCustom", {"bubbles": true, "cancelable": false});

// Ajout de l'écouteur d'événements
document.getElementById("monElement").addEventListener("monEvenementCustom", function(e) {
    console.log("Événement custom déclenché !");
});

// Déclenchement de l'événement
document.getElementById("declencheur").addEventListener("click", function() {
    document.getElementById("monElement").dispatchEvent(monEvenement);
});
// Création de l'événement
let monEvenement = new Event("monEvenementCustom", {"bubbles": true, "cancelable": false});

// Ajout de l'écouteur d'événements
document.getElementById("monElement").addEventListener("monEvenementCustom", function(e) {
    console.log("Événement custom déclenché !");
});

// Déclenchement de l'événement
document.getElementById("declencheur").addEventListener("click", function() {
    document.getElementById("monElement").dispatchEvent(monEvenement);
});

Dans cet exemple, un événement personnalisé monEvenementCustom est créé. Lorsque l'utilisateur clique sur l'élément avec l'ID declencheur, l'événement est déclenché sur l'élément avec l'ID monElement.

Remarques

  • Compatibilité : La méthode new Event() est bien prise en charge dans les navigateurs modernes, mais peut ne pas être compatible avec des navigateurs plus anciens.
  • Personnalisation : Pour des événements plus complexes avec des données personnalisées, envisagez d'utiliser CustomEvent, qui étend Event et permet de passer des données supplémentaires.