Events in Svelte are quite intuitive and easy to use. In this guide, we'll look at how to get started with Svelte events. It is assumed you have a good understanding of Javascript for this guide. If you are brand new to Svelte, it might make sense to read my guide on before beginning. creating your first Svelte application What are events in Svelte? When we create new components in Svelte, we will usually want them to do certain things when users interact with them - for example, hover over them, or click on them. Svelte allows for all the events you'd typically find in Vanilla Javascript. Let's start with a basic example. The component below creates a simple counter: <script> // we write export let to say that this is a property // that means we can change it later! let x = 0; const addToCounter = function() { ++x; } </script> <button id="counter">{x}</button> Every time the user clicks on the button, we want to fire, which will increase by 1, and display it within the button itself. To do that, we will add an event. addToCounter x Here is the event we'll need to add for when the user clicks the button: <button id="counter" on:click={addToCounter}>{x}</button> We use in Svelte to indicate that the value of this property is Javascript. Any Javascript event can be used in the place of . {} valid click For example, the below will increase the counter any time the mouse moves over the : button <button id="counter" on:mouseover={addToCounter}>{x}</button> Similarly, you can use other Javascript events, like , , , , , , , etc. These are just examples - but any Javascript event you want to use can be used. click scroll hover mouseup pointerup pointerdown mousedown How to Access Event Data in your Svelte Events? Sometimes, we want to access or data when a user interacts with our component. The object carries a lot of useful information about the event fired. To do that, we simply need to change our handler into a function. e event event For example, let’s retrieve the click position of the button, and display that to the user this time. <script> // we write export let to say that this is a property // that means we can change it later! let x = 0; let click = [0, 0] const addToCounter = function(e) { click[0] = e.clientX; click[1] = e.clientY; ++x; } </script> <button id="counter" on:click={(e) => { addToCounter(e) }}> Clicked {x} times, last at {click[0]}, {click[1]} </button> Here, we store and in a variable, and display that to the user any time the button is clicked. e.clientX e.clientY For those that don't know, and both refer to an aspect of the position of the cursor when the event was fired. e.clientX e.clientY Svelte is naturally reactive, so the button will update automatically with the latest data, whenever it is clicked. Svelte Event Forwarding Event forwarding is whenever a user triggers an event on a child component, which we want to handle in the parent component. It is essentially saying that this component can have a specific event, but it is not handled here. Looking at our prior example, we can set up event forwarding first by setting up events that can be forwarded on the child component. Let's say we create a component in a file called which looks like the one below. One button is clickable, while the other is not. Comp.svelte <button on:click> Click me, I am a button </button> <button> I am unclickable. Ignore me. </button> Here we are saying that the first button has a valid event. This is useful since it lets us define certain elements within a component with valid events which can be forwarded upwards. In our parent, then, we can import our button, like so: on:click <script> import Comp from './Comp.svelte'; let x = 0; const addToCounter = () => { ++x; } </script> <Comp on:click={addToCounter} /> Now when the user clicks on the first within , it will fire the event and run the function. If we removed from completely, then no event would trigger despite defining on our component. button Comp on:click addToCounter on:click Comp.svelte on:click Comp That means we can not only define that a child should have an event attached to it, but we can also define which elements have that event, by adding it to the child component itself. This gives us a lot of flexibility. specific Final thoughts Svelte events are straightforward to use, and the fact that they follow the same naming conventions as Vanilla Javascript events makes them incredibly simple to use. In this guide, we've covered the basics so you can get started. Also Published Here For more Svelte content, try my other articles here
