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. This is 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, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
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. 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. The Sveltejs Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
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