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 ().
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
📚 Related Resources
Svelte
Svelte REPL
Svelte Tutorial: DOM Events
Svelte Tutorial: Inline handlers
Svelte Tutorial: Event modifiers
Svelte Docs: on:eventname #on_element_event
MDN
1 view
427
112
9 months ago 01:16:00 1
Часть 1. Делаем чат на Svelte. NodeJs. GraphQL и Websockets. Верстка.
10 months ago 00:05:01 1
1999 Jaguar XJR For Sale Gateway Classic Cars Orlando #1869
11 months ago 02:54:25 1
Web Development In 2023 - A Practical Guide
2 years ago 00:20:58 1
Система нотификаций с Redux Thunk
2 years ago 00:18:23 1
Что такое КОМПОЗИЦИЯ в Redux Thunk?
2 years ago 00:12:05 1
Что такое Redux Thunk?
2 years ago 01:05:03 1
Как быстро начать программировать?
3 years ago 00:19:42 3
gQuery 101
3 years ago 00:05:20 1
How To Build a LEGO Sphere
4 years ago 00:29:30 1
Svelte 101: svelte options
4 years ago 00:08:16 1
Svelte 101: svelte:window
4 years ago 00:09:38 1
Svelte 101: svelte:head
4 years ago 00:04:07 1
Svelte 101: svelte:body
4 years ago 00:06:17 1
Svelte 101: svelte:self
4 years ago 00:09:22 1
Svelte 101: svelte:component
4 years ago 00:34:50 1
Svelte 101: Lazy Component
4 years ago 00:25:56 1
Svelte 101: $$props and $$restProps
4 years ago 00:34:37 7
Svelte 101: Tabs
4 years ago 00:27:21 1
Svelte 101: Infinite List
4 years ago 00:09:29 1
Svelte 101: $$slots
4 years ago 00:16:56 1
Svelte 101: Slots Forwarding
4 years ago 00:09:29 1
Svelte 101: Passing data across slot
4 years ago 00:13:09 5
Svelte 101: Slot to compose components
4 years ago 00:13:26 1
Svelte 101: Recreate elements and components when value changes with {#key} block