Data is passed as second argument to dispatch. Example: dispatch('custom', { detail: value }). Accessed in handler through event.detail. Supports any serializable data.
Event replay records and replays events. Store event sequence. Handle timing. Support playback control. Manage replay state.
Event tracking monitors user interactions. Implement analytics. Handle custom events. Support tracking parameters. Manage tracking data.
Cross-component events use stores or context. Handle event routing. Support event broadcasting. Implement event hierarchy. Manage event scope.
Event error handling catches and processes errors. Implement error boundaries. Support error recovery. Handle error reporting.
Multiple events use multiple on: directives. Example: <div on:click={handleClick} on:mouseover={handleHover}>. Each event can have its own modifiers and handlers.
Event throttling limits execution frequency. Implement using timer and last execution time. Ensure minimum time between executions. Support custom throttle intervals.
Form events include submit, reset, change. Prevent default submission. Handle validation. Collect form data. Support dynamic forms.
Component events are listened to using on:eventName. Parent components can listen to dispatched events. Example: <Child on:custom={handleCustom}>. Events bubble by default.
Inline handlers can be defined directly in the on: directive. Example: <button on:click={() => count += 1}>. Good for simple operations but avoid complex logic.
Event object contains event details passed to handlers. Includes properties like target, currentTarget, preventDefault(). Available as first parameter in event handlers.
Event debouncing delays handler execution. Use timer to postpone execution. Clear previous timer on new events. Example: implement custom action or store for debouncing.
Outside clicks check event.target relationship. Implement using actions. Handle document clicks. Support multiple elements. Clean up listeners.
Touch events include touchstart, touchmove, touchend. Handle gestures. Support multi-touch. Implement touch feedback. Handle touch coordinates.
Event documentation describes event behavior. Generate documentation automatically. Support example usage. Handle event versioning.
DOM events in Svelte are handled using the on: directive. Example: <button on:click={handleClick}>. Supports all standard DOM events like click, submit, input, etc. Event handler receives the event object as parameter.
Event modifiers customize event behavior using | symbol. Common modifiers include preventDefault, stopPropagation, once, capture. Example: <form on:submit|preventDefault={handleSubmit}>.
Custom events are created using createEventDispatcher. Import from svelte, initialize in component, then dispatch events. Example: const dispatch = createEventDispatcher(); dispatch('custom', data);
Event forwarding passes events up through components using on:eventName. No handler needed for forwarding. Example: <button on:click>. Useful for bubbling events through component hierarchy.
Event delegation handles events at a higher level using bubbling. Attach single handler to parent for multiple children. Use event.target to identify source. Improves performance for many elements.
Keyboard events use on:keydown, on:keyup, on:keypress. Access key information through event.key. Support key combinations. Handle keyboard navigation.
Drag and drop uses dragstart, dragover, drop events. Set draggable attribute. Handle data transfer. Support drag visualization. Implement drop zones.
Custom modifiers use actions (use:). Implement modifier logic. Support parameters. Handle cleanup. Share across components.
