🎯

Events in Svelte

Handle user interactions and DOM events

🖱️

Pointer Events

Track mouse movement with the onpointermove event:

POINTER COORDINATES

0 × 0

Move your mouse over this area

⬆️

Event Bubbling

Events propagate up through parent elements. Click in the input or container to see bubbling:

🔧

Component Events

Pass event handlers to child components as props:

📊

Stepper Component

Component with increment/decrement callbacks:

CURRENT VALUE

0

🔘

Custom Click Handler

Pass custom onclick handlers to components:

💡

Event Handling Concepts

🎪 Event Bubbling

Events propagate from child to parent elements

📤 Event Forwarding

Pass event handlers to child components

🎯 Inline Handlers

Write event handlers directly in templates

⚡ DOM Events

Access all standard browser events