0Pricing
Sveltejs Academy · Lesson

on:click on:input on:submit

Attach DOM event listeners directly in Svelte template syntax.

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>

All lessons in this course

  1. on:click on:input on:submit
  2. Event Modifiers: preventDefault stopPropagation once
  3. Custom Events with createEventDispatcher
  4. Forwarding Events with on:click
← Back to Sveltejs Academy