[Vidéo] Utilisez les signaux, c'est le futur d'Angular !

Dans cette vidéo de 3 minute, découvrez pourquoi les signaux sont essentiels pour l'avenir du développement web et apprenez les 3 fonctions: signal / computed / effect

Skip to content

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)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});

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é !");
});

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);

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);
});

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.

En août, Recevez des nouvelles libraries Angular 🌟 qui peuvent vous être utiles pour booster vos projets. Inscrivez-vous maintenant et découvrez les dernières tendances et outils Angular directement dans votre boîte mail !