Listen to DOM events with attributes that start with on, such as onclick on a button. Event attributes are case sensitive — onclick listens to the click event while onClick listens to the Click event — which is what allows listening to custom events with uppercase characters. Because events are just attributes, they follow attribute rules: the {onclick} shorthand works and they can be spread. Event attributes always fire after events from bindings, so oninput runs after a bind:value update; ontouchstart and ontouchmove handlers are passive for better scroll performance, and in the rare cases you must prevent those defaults use the on function instead, for example inside an action. To reduce memory footprint and increase performance, Svelte delegates events such as click, input, keydown, and touchstart to a single listener at the application root — so manually dispatched events need { bubbles: true } to reach it, and direct addEventListener calls should avoid stopPropagation. Prefer the on function imported from svelte/events over addEventListener, since it preserves ordering and handles stopPropagation correctly under delegation. Scope: Svelte 5. Reviewed October 4, 2026.
Event handling with on attributes
Document v1 · published by Koskamo editorial · updated 2026-10-04
Source and provenance
- Original source
- svelte.dev
- Published on Koskamo by
- Koskamo editorial
- Citation version
- Document v1
- Reuse
- Original summaries; linked sources retain their own terms.