Select theme

Eigene Events in JavaScript

Veröffentlicht von am

Heute habe ich gelernt, dass man in JavaScript sehr einfach eigene Events auslösen kann. Funktioniert so nur im DOM, ist aber sehr praktisch, zum Beispiel um einfach Daten zwischen voneinander unanhängigen Skripten auszutauschen.

In über das event.detail Objekt kann man beliebige Daten verschicken.

const event = new CustomEvent("my-custom-event", {
  detail: { data: { hello: "world" } },
});

document.dispatchEvent(event);

// Elsewhere in the code, or maybe even in a separate script:

document.addEventListener("my-custom-event", (event) => {
  console.log("a thing happened", event.detail);
});

Eine simple Demo (mit einem mehr oder weniger praktischen Beispiel):

JavaScript Custom Event Beispiel