JavaScript Academy · Leçon

Événements personnalisés

Créez et déclenchez vos propres événements.

Événements personnalisés est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Au-delà des événements intégrés

Le DOM vous permet de créer et de distribuer vos propres événements avec CustomEvent. Cela découple les parties de votre application : un composant annonce qu’une action s’est produite, et les autres l’écoutent sans référence directe.

Créer un CustomEvent

Construisez-en un avec new CustomEvent(name, options). Le nom peut être n’importe quelle chaîne de caractères de votre choix.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

Déclencher l’événement

Déclenchez l’événement sur une cible avec dispatchEvent. Tout écouteur enregistré pour ce nom sur la cible (ou sur un ancêtre si l’événement suit la propagation ascendante) s’exécute.

element.dispatchEvent(new CustomEvent("cart:add"));

Écouter cet événement

Écoutez-le exactement comme un événement natif en utilisant addEventListener avec votre nom personnalisé.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

Transmettre des données avec detail

Ajoutez une charge utile via la propriété detail. Les écouteurs la lisent depuis event.detail.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

Lire la charge utile

Dans l’écouteur, event.detail contient ce que vous avez transmis. Il peut s’agir de n’importe quelle valeur : objet, tableau, chaîne de caractères ou nombre.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

Faire remonter l’événement

Par défaut, les événements personnalisés ne suivent pas la propagation ascendante. Définissez bubbles: true afin que les ancêtres et les écouteurs délégués puissent les intercepter.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

L’option d’annulation

Définissez cancelable: true pour permettre aux écouteurs d’appeler preventDefault(). Le code qui distribue l’événement vérifie la valeur renvoyée par dispatchEvent pour déterminer s’il a été annulé.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

Un schéma de découplage

Les événements personnalisés permettent aux modules de communiquer sans s’importer mutuellement. Un outil de journalisation ou une couche d’analyse peut écouter les événements généraux de l’application sur document.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

Conventions de nommage

Utilisez des espaces de noms pour vos noms d’événements (comme cart:add et user:login) afin d’éviter les collisions avec les événements natifs et de regrouper clairement les événements associés.

Ancienne et nouvelle syntaxe

Vous pouvez rencontrer l’ancienne API document.createEvent dans du code ancien. Préférez le constructeur moderne new CustomEvent(...) : il est plus simple et c’est la seule forme que vous devriez écrire aujourd’hui.

const evt = new CustomEvent("ready", { detail: 1 });

Vérification rapide

Vérification des connaissances sur les événements personnalisés.

Récapitulatif

Utilisez new CustomEvent(name, { detail, bubbles, cancelable }) et dispatchEvent pour créer vos propres événements. Lisez la charge utile via event.detail, activez la propagation ascendante pour la délégation et utilisez cancelable pour les actions pouvant être annulées. Les événements personnalisés découplent les composants selon un style clair de publication-abonnement.

Questions Fréquemment Posées

La leçon « Événements personnalisés » est-elle gratuite ?

Oui — le texte complet de « Événements personnalisés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Événements personnalisés » ?

Créez et déclenchez vos propres événements. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Événements personnalisés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy