Les événements natifs du navigateur (click, submit, scroll) couvrent les interactions standard, mais un projet a souvent besoin de signaler ses propres moments clés : « le panier vient d’être mis à jour », « la modale de connexion s’est fermée ». Un événement personnalisé permet exactement ça : un script en émet un avec un nom et des données arbitraires, et n’importe quel autre script à l’écoute peut y réagir, sans lien direct entre les deux.
Un usage classique en écosystème WordPress
Plusieurs extensions WooCommerce déclenchent des événements personnalisés en JavaScript lors d’actions du panier (added_to_cart, par exemple, côté jQuery) pour permettre à un thème ou une autre extension de réagir sans devoir modifier le code source d’origine. C’est une façon d’étendre un comportement en JavaScript qui rappelle, dans son principe, les hooks d’actions de WordPress côté PHP.
Exemple
document.dispatchEvent( new CustomEvent( 'panier:mis-a-jour', {
detail: { total: 42.50 }
}));
document.addEventListener( 'panier:mis-a-jour', ( e ) => {
console.log( 'Nouveau total :', e.detail.total );
});Bon à savoir
- La propriété
detailtransporte les données de l’événement : sans elle, l’écouteur ne reçoit que le signal, sans aucune information complémentaire. - Un événement personnalisé bien nommé (avec un préfixe clair, comme
monplugin:evenement) évite les collisions avec d’autres scripts qui pourraient utiliser un nom d’événement similaire. - Contrairement aux hooks PHP de WordPress, un événement personnalisé JavaScript ne persiste pas d’une page à l’autre : il ne vit que le temps du chargement de la page en cours.