How to Create Custom Events in Svelte

You can use the createEventDispatcher function in Svelte to dispatch custom events that you can listen to:

<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();
    const callback = event => {
        console.log(`Dispatched with ${event.details}`);
    };
</script>

<button on:click={() => dispatch('notify', '👋')}>
    Dispatch event
</button>

<ChildComponent on:notify={callback} />

The dispatch function takes two arguments:

• The name of the event. In the example above, it is called notify
• The details of the event. In the example above, it is a single string of 👋

To listen to this dispatched event, you can attach an on:<customEventName> directive to elements.

Note that parent components can also listen to events dispatched in child components.

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

Looking to improve your skills? Learn how to build reactive apps with Svelte + Tailwind.

---

Resources:

• The createEvemtDispatcher function in Svelte