Video details

Svelte 101: Attaching events listeners in Svelte

Svelte
03.25.2021
English

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
---
đź’»
REPL https://svelte.dev/repl/78e0855b596e4a1391d77ad2d9e8dc8a?version=3.35.0
đź“š
Related Resources Svelte https://svelte.dev Svelte REPL https://svelte.dev/repl Svelte Tutorial: DOM Events https://svelte.dev/tutorial/dom-events Svelte Tutorial: Inline handlers https://svelte.dev/tutorial/inline-handlers Svelte Tutorial: Event modifiers https://svelte.dev/tutorial/event-modifiers Svelte Docs: on:eventname https://svelte.dev/docs#on_element_event MDN EventTarget.addEventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
🥰 Support me https://www.buymeacoffee.com/lihautan
đź”—
Want to learn more from me? Check out these links:
Twitter: https://twitter.com/lihautan Blog: https://lihautan.com/ Newsletter: https://lihautan.com/newsletter
#svelte #svelte101
Thanks for watching 🥰 -- with love, Li Hau