Vidarebefordra händelser med on:click
Skicka komponenthändelser vidare till den överordnade komponenten med det nakna on:-direktivet.
Vidarebefordra händelser med on:click är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vidarebefordra händelser
För att skicka vidare en underordnad komponents händelse genom er komponent skriver ni on:event utan hanterare.
Grundläggande vidarebefordran
Detta vidarebefordrar det inre elementets klick till användaren av MyButton.
<button on:click>Click</button>Lyssna som förälder
Föräldern lyssnar på komponenten på samma sätt som på ett DOM-element.
<MyButton on:click={handle} />Vidarebefordra flera händelser
Ni kan vidarebefordra så många inbyggda händelser som ni vill.
<input on:input on:focus on:blur />Wrapper-komponenter är användbara
Detta mönster är viktigt när ni bygger wrapper-komponenter som knappar, inmatningsfält och länkar.
Kombinera med anpassade händelser
Blanda fritt vidarebefordrade DOM-händelser med era egna createEventDispatcher-händelser.
Bevara händelseobjektet
Vidarebefordrade händelser når föräldern med det ursprungliga DOM-händelseobjektet intakt.
Inga modifierare behövs
Om ni vill att föräldern ska styra modifierarna lämnar ni bort dem från den underordnade komponenten.
Skillnad mot anpassade händelser
Vidarebefordran skickar vidare riktiga DOM-händelser. Anpassad dispatch skapar nya händelser.
TypeScript-vänligt
Vidarebefordrade händelser behåller sina exakta typer när föräldern deklarerar dem i TypeScript.
I praktiken
De flesta designsystemkomponenter använder vidarebefordran för att förbli flexibla utan att behöva ange varje prop.
Snabb kontroll
Vad gör on:click utan hanterare?
Sammanfattning
Direktiv av typen on:event utan hanterare vidarebefordrar DOM-händelser upp till komponentens förälder och möjliggör rena wrapper-API:er.
Lär dig HTML 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
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Vidarebefordra händelser med on:click” gratis?
Ja – hela texten till ”Vidarebefordra händelser med on:click” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Vidarebefordra händelser med on:click”?
Skicka komponenthändelser vidare till den överordnade komponenten med det nakna on:-direktivet. Ni övar på Sveltejs 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 Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs 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 ”Vidarebefordra händelser med on:click”?
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 Sveltejs Academy-lektionen?
Ja. Varje Sveltejs 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
- on:click on:input on:submit
- Händelsemodifierare: preventDefault stopPropagation once
- Anpassade händelser med createEventDispatcher
- Vidarebefordra händelser med on:click