CodeGym/Cours/Frontend SELF FR/Événements personnalisés

Événements personnalisés

Disponible

8.1 Création d'événements personnalisés

Les événements personnalisés (ou événements utilisateur) en JavaScript permettent aux développeurs de créer et de déclencher leurs propres événements, ce qui peut être utile pour transmettre des informations et interagir entre différentes parties de l'application. Créer et utiliser des événements personnalisés peut améliorer la structure et la flexibilité de votre code, offrant un moyen de notifier et de gérer l'état de l'application.

Pour créer des événements personnalisés, on utilise le constructeur CustomEvent. Ce constructeur permet de créer de nouveaux événements avec des paramètres personnalisables et des données supplémentaires.

Syntaxe :

const event = new CustomEvent(type, {detail: additionalData});

Où :

  • type : une chaîne représentant le nom de l'événement
  • detail : un objet contenant des données supplémentaires qui seront transmises avec l'événement

Exemple de création d'un événement personnalisé :

JavaScript
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });

8.2 Déclenchement d'événements personnalisés

Le déclenchement d'un événement se fait à l'aide de la méthode dispatchEvent. Cette méthode est appelée sur l'élément où l'événement doit se produire.

Explication :

  • Un gestionnaire d'événement myCustomEvent est ajouté au bouton myButton, qui affiche dans la console le message des données de l'événement
  • Un événement personnalisé myCustomEvent est créé avec un message dans detail
  • L'événement est déclenché sur le bouton myButton, appelant le gestionnaire et affichant le message dans la console

Exemple :

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Event Example</title>
  </head>
  <body>
    <button id="myButton">Button</button>
    <script>
      const button = document.getElementById('myButton');

      // Ajout d'un gestionnaire pour l'événement personnalisé
      button.addEventListener('myCustomEvent', function(event) {
        console.log('Custom event received:', event.detail.message);
      });

      // Création et déclenchement d'un événement personnalisé
      const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
      button.dispatchEvent(myEvent);
    </script>
  </body>
</html>

8.3 Utilisation des événements personnalisés

Les événements personnalisés sont utiles pour créer un code plus modulaire et maintenable, en particulier lors du travail avec des composants et des applications complexes. Ils permettent à un composant d'informer d'autres composants des changements ou actions qui se sont produits.

Explication :

  • Le module A déclenche un événement personnalisé notifyB sur l'élément moduleB, en transmettant des données
  • Le module B écoute l'événement notifyB et le traite, affichant un message dans la console

Exemple d'utilisation des événements personnalisés dans une application modulaire :

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Module Communication Example</title>
  </head>
  <body>
    <div id="moduleA">Module A</div>
    <div id="moduleB">Module B</div>
    <script>
      const moduleA = document.getElementById('moduleA');
      const moduleB = document.getElementById('moduleB');

      // Le module A déclenche un événement personnalisé
      function notifyModuleB() {
        const event = new CustomEvent('notifyB', { detail: { message: 'Data from Module A' } });
        moduleB.dispatchEvent(event);
      }

      // Le module B écoute l'événement personnalisé
      moduleB.addEventListener('notifyB', function(event) {
        console.log('Module B received:', event.detail.message);
      });

      // Simulation d'une action dans le module A
      notifyModuleB();
    </script>
  </body>
</html>

8.4 Paramètres des événements personnalisés

Les événements personnalisés peuvent être configurés en utilisant les paramètres suivants :

  • bubbles : une valeur booléenne indiquant si l'événement doit remonter. Par défaut false
  • cancelable : une valeur booléenne indiquant si l'événement peut être annulé. Par défaut false
  • composed : une valeur booléenne indiquant si l'événement doit se propager au-delà des arbres DOM ombragés. Par défaut false

Exemple :

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Event Parameters Example</title>
  </head>
  <body>
    <div id="container">
      <button id="myButton">Button</button>
    </div>
    <script>
      const container = document.getElementById('container');
      const button = document.getElementById('myButton');

      // Ajout de gestionnaires pour le conteneur et le bouton
      container.addEventListener('customEvent', function(event) {
        console.log('Container received:', event.detail.message);
      });

      button.addEventListener('customEvent', function(event) {
        console.log('Button received:', event.detail.message);
      });

      // Création et déclenchement d'un événement personnalisé avec des paramètres
      const myEvent = new CustomEvent('customEvent', {
        detail: { message: 'Hello from button' },
        bubbles: true,
        cancelable: true,
        composed: false
      });

      button.dispatchEvent(myEvent);
    </script>
  </body>
</html>
1
Mission
Frontend SELF FR,  niveau 42leçon 2
Bloqué
Notification de sauvegarde
Notification de sauvegarde
1
Mission
Frontend SELF FR,  niveau 42leçon 2
Bloqué
Mise à jour du texte
Mise à jour du texte
Commentaires
  • Populaires
  • Nouveau
  • Anciennes
Tu dois être connecté(e) pour laisser un commentaire
Cette page ne comporte pas encore de commentaires