How to use events in Svelte
Intro to Svelte events
In my last article about Svelte, I talked about the advantages in general and how you can implement your first components, import them or display dynamic data. If you are new to Svelte, you should read my article “Why you should try Svelte”.
Today we talk about the cosmos of events in Svelte. I will cover DOM
Tl;dr
In this article, I cover Svelte events, their use cases, how you implement custom component events and how you can bubble them up the DOM
Tables of Contents
1. Built-In Event handlers
DOM Events
Event handlers are added to a component by on:{eventname} directive. To listen to the onclick event, you’ll pass a function to the on:onclick attribute. You get the event object as an argument of your click handler.
<script>
function handleClick(event) {
console.log('whooohoooo click event listener worked');
}
</script>
<button on:click="{handleClick}">Click me</button>As the compiler takes care of the JavaScript generation, it also handles your coding style. In some frameworks, it’s recommended to avoid inline event handlers for performance reasons. The compiler takes care of this. I got used to preventing inline functions; therefore, you won’t see them in my examples. But feel free to use them in Svelte if you like.
Event modifiers
DOM events can have an event modifier. You can use them to tell the compiler to perform additional logic.
List of event modifiers
preventDefault— “calls event.preventDefault() before running the handler. Useful for client-side form handling, for example.”stopPropagation— “calls event.stopPropagation(), preventing the event from reaching the next element.”passive— “improves scrolling performance on touch/wheel events (Svelte will add it automatically where it’s safe to do so)”nonpassive— explicitly set passive: falsecapture— “fires the handler during the capture phase instead of the bubbling phase ()”once— “remove the handler after the first time it runs.”self— “only trigger handler if event.target is the element itself.”trusted— “only trigger handler if event.isTrusted is true. I.e. if the event is triggered by a user action.”
<form on:submit|preventDefault={handleSubmit}>
</form>The handleSubmit function will be called when the form is submitted. The event.preventDefault() will be called before the handler is called.
Component events
You can create custom events in svelte components and dispatch a message. To do so, you need to create a custom event dispatcher with the building function createEventDispatcher. createEventDispatcher has to be called when the component is instantiated for the first time.
If you are not familiar with event bubble and capture I recommend you to check out that topic as I don’t cover it in my post.
As soon as you want to trigger the event, you use the dispatch function. This function takes a string and object as arguments. The string identifies the event, and the object is optional data that is available on the event object.
CustomEvent.svelte
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
// trigger event and send object
function sayHello() {
dispatch('eventName', {
text: 'nice event',
});
}
</script>
<button on:click="{sayHello}">Click for your custom event</button>App.svelte
<script>
import CustomEvent from './components/CustomEvent.svelte';
</script>
<CustomEvent on:eventName={(event, args) => { console.log(event, args); }} />2. Event forwarding
If you write a custom component event, you have to keep in mind, that they don’t bubble up the DOM like DOM events itself if you want to listen to an event that a nested component dispatched you to have to forward it from the intermediate components.
Newsletter
Hello and welcome! Don't miss out on crucial web performance insights, plus the latest on accessibility and sustainability, delivered directly to your inbox. Elevate your craft in creating fast, user-friendly, and eco-conscious websites. Sign up now to access seasoned expertise and the freshest news!
As you see below you Svelte has a shorthand for event forwarding. Your intermediate component forwards the event by using the same listener directive as before but without any event handler. In our case <CustomEvent on:eventName/> in Wrapper.svelte forwards the event triggered in CustomEvent.svelte.
App.svelte
<script>
import Wrapper from './Wrapper.svelte';
function handleEvent(event) {
console.log(event);
}
</script>
<Wrapper on:eventName="{handleEvent}" />Wrapper.svelte
<script>
import CustomEvent from './CustomEvent.svelte';
</script>
<CustomEvent on:eventName />CustomEvent.svelte
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
// trigger event and send object
function sayHello() {
dispatch('eventName', {
text: 'nice event',
});
}
</script>
<button on:click="{sayHello}">Click for your custom event</button>DOM event forwarding
The event forwarding just presented can also be used for DOM events. If you have a custom component with a child that is listening to a DOM event, you can forward these events as well.
FancyImage.svelte
<style>
img {
width: 100%;
}
</style>
<img
on:mouseover
src="https://images.unsplash.com/photo-1561303087-84f633edd5ea"
alt="Photo by @sebastiandumitru on unsplash"
/>App.svelte
<script>
import FancyImage from './FancyImage.svelte';
function handleHover() {
alert('clicked');
}
</script>
<FancyImage on:mouseover="{handleHover}" />4. What’s next?
You find all the resources for this article on GitHub. Feel free to check it out, try some stuff or fork it.
Now you should be able to use events in Svelte like a pro! If you want to dive deeper, I recommend taking an hour or two of your time and going through the official tutorial.
If you like this article, smile for a moment, share it, follow me, check out my RSS feed and subscribe to my newsletter.
Cheers Marc
Updates
2021-05-05: Updated List of event modifiers
2023-01-30: Updated List of event modifiers, added event forwarding example
