Émettre des événements en JavaScript

Introduction

• Discuter de l'émission d'événements personnalisés en JavaScript.
• Application pratique : système de to-do list pour détecter la suppression d'une tâche.

Événements natifs vs événements personnalisés

• Les éléments DOM ont des événements natifs.
• Possibilité de créer des événements personnalisés avec CustomEvent.

Création d'un événement personnalisé

• Utiliser dispatchEvent pour émettre un événement.
• Exemple : émettre un CustomEvent lors de la suppression d'un élément.

Écouter des événements

• Utiliser addEventListener pour écouter des événements personnalisés.
• Exemple d'écoute de l'événement Delete.

Détails d'un CustomEvent

• Propriétés de l'événement :
  • currentTarget: cible de l'événement.
  • detail: pour envoyer des informations supplémentaires sur l'événement.
  • bubbles: indique si l'événement se propage vers le parent.
  • cancelable: permet d'annuler l'événement avec preventDefault().

Exemple d'utilisation de bubbles et cancelable

• Si bubbles est true, l'événement remonte jusqu'au body.
• Utilisation de cancelable:
  • Si un listener appelle preventDefault(), l'événement peut être annulé.

Cas d'utilisation des événements

• Communication entre composants enfant et parent.
• Exemple : émettre un événement lors de la suppression ou du changement d'état d'une tâche.

Mise à jour de la liste des tâches

• Sur suppression d'une tâche : filtrer la liste en supprimant la tâche.
• Sur changement de checkbox : modifier l'objet de la tâche.

Conclusion

• Les événements personnalisés sont utiles pour la communication entre composants.
• Conseils pour nommer les événements : éviter de dupliquer les noms natifs pour éviter la confusion.
• Importance de comprendre le fonctionnement des CustomEvents dans le développement JavaScript.