JavaScript Academy · Les

Custom events

Maak uw eigen events en stuur ze uit.

Les 4 van 413 stappen

Custom events is een gratis JavaScript Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Verder dan ingebouwde gebeurtenissen

Met de DOM kun je je eigen gebeurtenissen maken en verzenden met CustomEvent. Hierdoor raken onderdelen van je app minder van elkaar afhankelijk: één component kondigt aan dat er iets is gebeurd, terwijl andere luisteren zonder een rechtstreekse verwijzing.

Een CustomEvent maken

Maak er een met new CustomEvent(name, options). De naam mag elke tekenreeks zijn die je kiest.

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

De gebeurtenis verzenden

Activeer de gebeurtenis op een doel met dispatchEvent. Elke luisterfunctie die op het doel voor die naam is geregistreerd (of op een voorouder als de gebeurtenis omhoog borrelt) wordt uitgevoerd.

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

Ernaar luisteren

Luister er precies zo naar als naar een ingebouwde gebeurtenis: gebruik addEventListener met je aangepaste naam.

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

Gegevens doorgeven met detail

Voeg een lading toe via de eigenschap detail. Luisterfuncties lezen die uit event.detail.

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

De lading uitlezen

Binnen de luisterfunctie bevat event.detail alles wat je hebt doorgegeven. Dat kan elke waarde zijn: een object, array, tekenreeks of getal.

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

De gebeurtenis omhoog laten borrelen

Aangepaste gebeurtenissen borrelen standaard NIET omhoog. Stel bubbles: true in, zodat voorouders en gedelegeerde luisterfuncties de gebeurtenis kunnen opvangen.

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

De optie cancelable

Stel cancelable: true in zodat luisterfuncties preventDefault() kunnen aanroepen. De verzender controleert de teruggegeven waarde van dispatchEvent om te bepalen of de gebeurtenis is geannuleerd.

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

Een patroon om afhankelijkheden te verminderen

Met aangepaste gebeurtenissen kunnen modules communiceren zonder elkaar te importeren. Een logboekcomponent of analyselaag kan op document luisteren naar gebeurtenissen die voor de hele app gelden.

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

Naamgevingsconventies

Voorzie je gebeurtenisnamen van een naamruimte (zoals cart:add en user:login) om botsingen met ingebouwde gebeurtenissen te voorkomen en verwante gebeurtenissen duidelijk te groeperen.

Oude en nieuwe syntaxis

In oudere code kun je de verouderde API document.createEvent tegenkomen. Geef de voorkeur aan de moderne constructor new CustomEvent(...); die is eenvoudiger en de enige vorm die je tegenwoordig zou moeten schrijven.

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

Korte toets

Kennistoets over aangepaste gebeurtenissen.

Beantwoord dit in de interactieve les

Samenvatting

Gebruik new CustomEvent(name, { detail, bubbles, cancelable }) en dispatchEvent om je eigen gebeurtenissen te maken. Lees de lading uit via event.detail, kies omhoog borrelen voor delegatie en gebruik cancelable voor acties die kunnen worden geannuleerd. Met aangepaste gebeurtenissen maak je componenten los van elkaar in een duidelijke stijl van publiceren en abonneren.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Custom events” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Custom events”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Custom events”?

Maak uw eigen events en stuur ze uit. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Custom events”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy