Video details

Svelte 101: Attaching events listeners in Svelte


To allow user to interact with your component, you need to add event listeners to respond to user's action.
We are going to see how to use the `on:` directive to add event listener, and we draw the comparison of it with using element.addEventListener().
element.addEventListeners takes in the 3rd parameter as options. In Svelte, we can provide them using event modifiers. We will see how the 7 different event modifiers work with examples.
Introduction 00:00 Adding event listeners 00:30 Inline event handlers 02:59 Event modifiers 04:40
Related Resources Svelte Svelte REPL Svelte Tutorial: DOM Events Svelte Tutorial: Inline handlers Svelte Tutorial: Event modifiers Svelte Docs: on:eventname MDN EventTarget.addEventListener
🥰 Support me
Want to learn more from me? Check out these links:
Twitter: Blog: Newsletter:
#svelte #svelte101
Thanks for watching 🥰 -- with love, Li Hau