Handling Basic DOM Events in Svelte
Svelte handles DOM events with on:eventname syntax in your markup, linking elements to functions in your script. This is for user interactions within a component, not for parent-child communication. The footgun is confusing this with custom component events.
Why it exists
Web applications must respond to user actions like clicks, mouse movements, and keyboard input. Svelte integrates event handling directly into its component structure, providing a declarative and readable way to make UIs interactive without manually managing event listeners.
The mental model
Think of it as adding an event listener directly onto your HTML element. Instead of finding the element in the DOM and calling element.addEventListener('click', ...) in your script, you simply write on:click={...} on the element itself. The Svelte compiler handles the boilerplate of wiring it up efficiently.
How it works
In a Svelte component, you define a function inside the <script> tag. In your template's HTML, you add an on: directive to an element, followed by the name of a standard DOM event, like on:click or on:mouseover. You then assign your function to this directive. When the user performs the action, Svelte executes your function. The onclick={greet} syntax seen in some examples is a familiar shorthand that is equivalent to on:click={greet}.
When to use it
Use on: directives for any standard browser DOM events that happen within a single component's template. This is the primary method for capturing user input like button clicks, form submissions, or mouse movements to trigger logic in your component's script.
When not to use it
This mechanism is not for communication between components. If a child component needs to send a notification or data up to its parent, direct DOM event handling is the wrong tool. That scenario requires Svelte's custom event dispatcher, which is a separate feature for component composition.
One canonical example
A simple button that triggers an alert when clicked. Inside the <script> tag, you define a function: function greet() { alert('Welcome to Svelte!'); }. In the template, you create the button and attach the handler: <button on:click={greet}>click me</button>. Clicking this button will run the greet function.
Interview question
For which scenario is Svelte's on:eventname directive NOT the recommended approach?
- a.Allowing a child component to send data or a notification to its parent.Correct
- b.Capturing a user's click on a button within the same Svelte component.
- c.Attaching a standard DOM event listener to an element without manual addEventListener calls.
- d.Responding to a form submission event within a component's template.
Why? this is the answer
The card explicitly states that on:eventname is not for communication between components, which requires Svelte's custom event dispatcher. Options A, C, and D describe appropriate uses of on:eventname for handling standard DOM events within a component.
Just read this? Test yourself on what you have been reading.
Read the original → svelte.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on svelte — each one lists the topics its interview covers.
See open roles