JavaScript Academy · Lektion

Tilpassede hændelser

Opret og afsend dine egne hændelser.

Lektion 4 af 413 trin

Tilpassede hændelser er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Ud over indbyggede hændelser

DOM'en lader dig oprette og udløse dine egne hændelser med CustomEvent. Det afkobler dele af din app: Én komponent meddeler, at noget er sket, og andre lytter uden en direkte reference.

Opret en CustomEvent

Opret en med new CustomEvent(name, options). Navnet kan være en vilkårlig streng, du vælger.

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

Udløs den

Udløs hændelsen på et mål med dispatchEvent. Alle lyttere, der er registreret til det navn på målet (eller på en overordnet komponent, hvis hændelsen bobler), bliver kørt.

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

Lyt efter den

Lyt efter den på samme måde som efter en indbygget hændelse ved at bruge addEventListener med dit brugerdefinerede navn.

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

Send data med detail

Vedhæft dataindhold via egenskaben detail. Lyttere læser det fra event.detail.

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

Læs dataindholdet

I lytteren indeholder event.detail det, du har sendt. Det kan være en hvilken som helst værdi: et objekt, en liste, en streng eller et tal.

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

Få den til at boble

Brugerdefinerede hændelser bobler IKKE som standard. Angiv bubbles: true, så overordnede komponenter og delegerede lyttere kan høre den.

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

Indstillingen cancelable

Angiv cancelable: true for at give lyttere mulighed for at kalde preventDefault(). Den kode, der udløser hændelsen, undersøger returværdien fra dispatchEvent for at se, om den blev annulleret.

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

Et mønster til afkobling

Brugerdefinerede hændelser lader moduler kommunikere uden at importere hinanden. En lognings- eller analyselag kan lytte på document efter hændelser, der gælder for hele appen.

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

Navngivningskonventioner

Brug navnerum til dine hændelsesnavne (som cart:add og user:login) for at undgå kollisioner med indbyggede hændelser og tydeligt samle relaterede hændelser.

Gammel og ny syntaks

Du kan se den forældede document.createEvent-API i ældre kode. Foretræk den moderne konstruktør new CustomEvent(...); den er enklere og den eneste form, du bør skrive i dag.

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

Hurtigt tjek

Videnstjek om brugerdefinerede hændelser.

Besvar den i den interaktive lektion

Opsamling

Brug new CustomEvent(name, { detail, bubbles, cancelable }) og dispatchEvent til at oprette dine egne hændelser. Læs dataindholdet via event.detail, tilvælg bobling til delegering, og brug cancelable til handlinger, der kan annulleres. Brugerdefinerede hændelser afkobler komponenter i et rent udgiver-abonnent-mønster.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Tilpassede hændelser” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Tilpassede hændelser”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Tilpassede hændelser”?

Opret og afsend dine egne hændelser. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Tilpassede hændelser”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy