JavaScript Academy · Lektion

Anpassade händelser

Skapa och skicka egna händelser.

Lektion 4 av 413 steg

Anpassade händelser är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Bortom inbyggda event

Med DOM kan du skapa och skicka egna event med CustomEvent. Det frikopplar delar av appen: en komponent meddelar att något har hänt och andra lyssnar utan en direkt referens.

Skapa ett CustomEvent

Skapa ett med new CustomEvent(name, options). Namnet kan vara vilken sträng som helst som du väljer.

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

Skicka det

Skicka eventet på ett mål med dispatchEvent. Alla lyssnare som registrerats för det namnet på målet (eller på en förfader om eventet bubblar) körs.

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

Lyssna efter det

Lyssna precis som på ett inbyggt event genom att använda addEventListener med ditt anpassade namn.

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

Skicka data med detail

Bifoga en payload via egenskapen detail. Lyssnare läser den från event.detail.

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

Läs payloaden

Inne i lyssnaren innehåller event.detail det som du skickade. Det kan vara vilket värde som helst: ett objekt, en array, en sträng eller ett tal.

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

Få det att bubbla

Anpassade event bubblar INTE som standard. Ange bubbles: true så att förfäder och delegerade lyssnare kan fånga upp eventet.

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

Alternativet cancelable

Ange cancelable: true för att tillåta lyssnare att anropa preventDefault(). Den kod som skickar eventet kontrollerar returvärdet från dispatchEvent för att se om eventet avbröts.

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

Ett mönster för frikoppling

Anpassade event låter moduler kommunicera utan att importera varandra. Ett loggnings- eller analyslager kan lyssna på document efter event för hela appen.

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

Namngivningskonventioner

Använd namnrymder för dina eventnamn (till exempel cart:add och user:login) för att undvika kollisioner med inbyggda event och tydligt gruppera relaterade event.

Gammal och ny syntax

Du kan se det äldre API:et document.createEvent i äldre kod. Föredra den moderna konstruktorn new CustomEvent(...); den är enklare och är den enda formen du bör skriva i dag.

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

Snabbtest

Kunskapstest om anpassade event.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Använd new CustomEvent(name, { detail, bubbles, cancelable }) och dispatchEvent för att skapa egna event. Läs payloaden via event.detail, aktivera bubbling för delegering och använd cancelable för åtgärder som ska kunna avbrytas. Anpassade event frikopplar komponenter i ett tydligt publicerings- och prenumerationsmönster.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Anpassade händelser” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Anpassade händelser”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Anpassade händelser”?

Skapa och skicka egna händelser. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Anpassade händelser”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy