Forwarding Events with on:click
Re-emit component events to the parent using the bare on: directive.
Forwarding Events with on:click is a free Sveltejs Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Event Forwarding
To re-emit a child element's event up through your component, write on:event with no handler.
Basic Forwarding
This forwards the inner button's click to the consumer of MyButton.
<button on:click>Click</button>Listening as a Parent
The parent listens to the component the same way as a DOM element.
<MyButton on:click={handle} />Forward Multiple Events
You can forward as many native events as you want.
<input on:input on:focus on:blur />Wrapper Components Win
This pattern is essential for building wrapper components like buttons, inputs, and links.
Combined with Custom Events
Mix forwarded DOM events with your own createEventDispatcher events freely.
Preserve Event Object
Forwarded events arrive at the parent with the original DOM Event object intact.
No Modifiers Needed
If you want the parent to be in charge of modifiers, leave them off the child.
Difference from Custom Events
Forwarding re-emits real DOM events; custom dispatch creates new ones.
TypeScript Friendly
Forwarded events keep their precise types when the parent declares them in TypeScript.
Real World
Most design system components use forwarding to stay flexible without listing every prop.
Quick Check
What does on:click with no handler do?
Recap
Bare on:event directives forward DOM events up to your component's parent, enabling clean wrapper APIs.
Frequently asked questions
Is the “Forwarding Events with on:click” lesson free?
Yes — the full text of “Forwarding Events with on:click” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Forwarding Events with on:click”?
Re-emit component events to the parent using the bare on: directive. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Forwarding Events with on:click” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- on:click on:input on:submit
- Event Modifiers: preventDefault stopPropagation once
- Custom Events with createEventDispatcher
- Forwarding Events with on:click