![How to Create Custom Events in Svelte](https://allma.si/blog/wp-content/uploads/2020/10/how-to-create-custom-events-in-svelte.png)
How to Create Custom Events in Svelte
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} />
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](https://allma.si/blog/wp-content/uploads/2020/10/how-to-create-custom-events-in-svelte.png)
![Looking into Svelte 3](https://miro.medium.com/max/1400/1*L2Ifz2MJRHRC8m2S_oH45g.png)
Resources:
π More Webtips
![Mentoring](/assets/img/mentoring.png)
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: