Svelte Tutorial for Beginners - 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 --- 💻 REPL https://svelte.dev/repl/78e0855b596e4... 🎧 Svelte Tutorial for Beginners    • Svelte Tutorial for Beginners   📚 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-ha... Svelte Tutorial: Event modifiers https://svelte.dev/tutorial/event-mod... Svelte Docs: on:eventname https://svelte.dev/docs#on_element_event MDN EventTarget.addEventListener https://developer.mozilla.org/en-US/d... 🥰 Support me https://www.buymeacoffee.com/lihautan 🔗 Want to learn more from me? Check out these links: Twitter:   / lihautan   Blog: https://lihautan.com/ Newsletter: https://lihautan.com/newsletter #svelte #sveltetutorial #sveltebeginner Thanks for watching 🥰 -- with love, Li Hau