Svelte has some awesome features when it comes to working with events. Events are the bread and butter of web development: mouse click events, input events, form submit events, and much more. We start out by looking at event directives in svelte. We see how to pass both a function name to the event directive as well as writing it directly inline. We then move on to a really cool feature of Svelte: event modifiers. This makes it so easy to do things like prevent default and limit a function call to only run once. And then we dive into Custom Event Dispatching. This allows a child component to fire an event which then can be handled in a parent component. We can event pass data up to the parent via the detail property on the event object. And, finally, we learn about Event Forwarding. This is a simple technique which allows us to forward events from child components up to parent components further up in the DOM hierarchy.
Created by Gregg Fine.
#svelte #webdevelopment #webdev #sveltekit #javascript
🎓 The Code Creative Store: Courses and Free Tutorials!
store.thecodecreative.com
🔴Subscribe for more free Code Creative videos: : / @thecodecreative
👭Join The Code Creative Community on Facebook:
/ thecodecreative
🌐 The Code Creative Official Website
www.thecodecreative.com/
🎓 The Code Creative Courses
www.thecodecreative.com/courses
▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 Introduction to Events in Svelte
00:37 Event Directives
3:00 Inline Events
4:00 Event Modifiers
5:20 Custom Event Dispatching
9:40 Event Forwarding
▬About The Code Creative ▬▬▬▬▬▬▬▬▬▬▬▬
The Code Creative helps web developers learn the fundamentals of programming, algorithms, as well as the latest frameworks and libraries. You can expect web development content that is fun, clear and concise, and keeps you engaged with visuals and a touch of humor.
▬Social Media ▬▬▬▬▬▬▬▬▬▬
▸ Twitter - @GreggFine
▸ Instagram - /greggfinedev
▸ Facebook - / thecodecreative
✅ Recommended related videos:
Debouncing Explained
• Debouncing Explained |...
Memoization Explained
• JavaScript Memoization...
Sorting in JavaScript Explained
• JavaScript Comparator ...
✅ For business inquiries contact me at gregg@greggfinedev.com