How to Use Event Listeners in Svelte

You can use the on:<eventName> directive in Svelte to listen to DOM events:

<script>
    let answer;

    function handleClick(event) {
        answer = Math.random() * 100;
    }
</script>

<button on:click={getTheAnswer}>
    What is the answer❔ {answer}
</button>

You can also fire events only once, by adding modifiers with a pipe:

<!-- This will fire once, then the event listener will be removed -->
<button on:click|once="{() => answer = Math.random()}">
    What is the answer❔ {answer}
</button>

Apart from once, you can also specify the following modifiers:

• preventDefault
• stopPropagation
• passive - this is tend to improve scrolling performance for scroll events
• capture - use event capturing instead of event bubbling
• self - only trigger the event if the target is the element itself.

You may also notice that I've declared an inline function. Unlike in React, you don't have to worry about performance if you define an inline handler.

You can also have the same event listener attached multiple times to an element:

<button on:click={getTheAnswer} on:click={trackingClickEvent}>
    What is the answer❔ {answer}
</button>

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• On element directives in Svelte