Videreformidle hendelser med on:click
Send komponenthendelser videre til den overordnede komponenten med den bare on:-direktivet.
Videreformidle hendelser med on:click er en gratis leksjon i Sveltejs Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Sveltejs Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.
Videresending av hendelser
Hvis du vil sende en barneelements hendelse på nytt opp gjennom komponenten din, skriver du on:event uten en behandler.
Grunnleggende videresending
Dette videresender klikket på den indre knappen til den som bruker MyButton.
<button on:click>Click</button>Lytt som forelder
Forelderen lytter til komponenten på samme måte som til et DOM-element.
<MyButton on:click={handle} />Videresend flere hendelser
Du kan videresende så mange opprinnelige hendelser du ønsker.
<input on:input on:focus on:blur />Wrapper-komponenter fungerer godt
Dette mønsteret er viktig når du bygger wrapper-komponenter som knapper, inndatafelt og lenker.
Kombiner med egendefinerte hendelser
Kombiner fritt videresendte DOM-hendelser med dine egne createEventDispatcher-hendelser.
Bevar hendelsesobjektet
Videresendte hendelser kommer frem til forelderen med det opprinnelige DOM Event-objektet intakt.
Ingen modifikatorer nødvendig
Hvis du vil at forelderen skal styre modifikatorene, lar du dem være utelatt på barnet.
Forskjell fra egendefinerte hendelser
Videresending sender ekte DOM-hendelser på nytt, mens egendefinert dispatch oppretter nye hendelser.
TypeScript-vennlig
Videresendte hendelser beholder de presise typene sine når forelderen deklarerer dem i TypeScript.
I praksis
De fleste komponenter i designsystemer bruker videresending for å være fleksible uten å måtte liste opp hver prop.
Rask kontroll
Hva gjør on:click uten en behandler?
Oppsummering
Enkle on:event-direktiver videresender DOM-hendelser til komponentens forelder, slik at du får ryddige wrapper-API-er.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Videreformidle hendelser med on:click» gratis?
Ja – hele teksten i «Videreformidle hendelser med on:click» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Sveltejs Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Videreformidle hendelser med on:click»?
Send komponenthendelser videre til den overordnede komponenten med den bare on:-direktivet. Du øver på Sveltejs Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Sveltejs Academy?
Ingen tidligere erfaring er nødvendig. Sveltejs Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Videreformidle hendelser med on:click»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Sveltejs Academy-leksjonen?
Ja. Alle Sveltejs Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- on:click on:input on:submit
- Hendelsesmodifikatorer: preventDefault stopPropagation once
- Egendefinerte hendelser med createEventDispatcher
- Videreformidle hendelser med on:click