Event et CustomEvent

Ouvrir la console pour voir le détail.

Il y a deux fichiers distincts qui ne possèdent aucun lien ensemble listener.js et trigger.js (assets/js).

Je les fais communiquer ensemble via un CustomEvent par l'objet window (global). trigger.js envoie un CustomEvent (DispatchEvent).

listener.js lui ecoute window sur le nom (type) de l'évenement choisi (kernel dans cet exemple)

---

---

Le code

Listener

window.addEventListener("kernel", (event) => {
  // Do Something
})

Type Assertion en TypeScript

window.addEventListener("change-theme", ((event: CustomEvent) => {
  // Do Something
}) as EventListener);

---

Dispatcher (trigger)

La différence entre Event et CustomEvent c'est le fait que tu peux utiliser {detail:{}} pour passer de la data avec CustomEvent.

Event (classic)

trigger.addEventListener("click", () => {
  window.dispatchEvent(new Event("kernel"))
})

CustomEvent

trigger.addEventListener("click", () => {
  window.dispatchEvent(
    new CustomEvent("kernel", {detail: {message: "Hello World"}})
  )
})