on:click on:input on:submit
Attach DOM event listeners directly in Svelte template syntax.
on:click on:input on:submit is a free Sveltejs Academy lesson on CoddyKit — lesson 1 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 Directives
Use on: followed by the DOM event name to attach a listener.
<button on:click={handleClick}>Click</button>Inline Handlers
Pass an arrow function for inline logic.
<button on:click={() => count++}>+</button>Named Handlers
Define a function in script and reference it by name.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>Receiving the Event Object
The handler receives the native Event as its argument.
function onChange(e) { value = e.target.value; }on:input
The input event fires whenever the user types in a text field.
<input on:input={(e) => text = e.target.value} />on:submit
Attach to a <form> to handle submission. Use modifiers to prevent default.
<form on:submit|preventDefault={save}>...</form>on:keydown
Listen for keyboard events on inputs or globally on the document.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change vs on:input
The change event fires when the user finishes editing; input fires on every keystroke.
Mouse Events
Standard DOM mouse events all work: mouseenter, mouseleave, mousemove.
Touch Events
Mobile touch events like touchstart are supported the same way.
<div on:touchstart={start} on:touchend={end}>Multiple Listeners
You can attach multiple on: directives to the same element for different events.
<button on:click={a} on:focus={b}>...</button>Quick Check
What syntax attaches a click handler?
Recap
Use on:event directives for any DOM event. The handler can be inline or a named function and receives the Event.
Frequently asked questions
Is the “on:click on:input on:submit” lesson free?
Yes — the full text of “on:click on:input on:submit” 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 “on:click on:input on:submit”?
Attach DOM event listeners directly in Svelte template syntax. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “on:click on:input on:submit” 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.