How to Create Custom Events in Svelte

How to Create Custom Events in Svelte

Ferenc Almasi β€’ 2020 October 09 β€’ Read time 1 min read
  • twitter
  • facebook

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

Copied to clipboard!
<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} />
Dispatch.svelte

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.

How to Create Custom Events in Svelte
If you would like to see more Webtips, follow @flowforfrank

Looking into Svelte 3

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.