Interview Questions
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);
Component events are listened to using on:eventName. Parent components can listen to dispatched events. Example: <Child on:custom={handleCustom}>. Events bubble by default.
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.
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 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.
Data is passed as second argument to dispatch. Example: dispatch('custom', { detail: value }). Accessed in handler through event.detail. Supports any serializable data.
Event object contains event details passed to handlers. Includes properties like target, currentTarget, preventDefault(). Available as first parameter in event handlers.
Multiple events use multiple on: directives. Example: <div on:click={handleClick} on:mouseover={handleHover}>. Each event can have its own modifiers and 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.
Event throttling limits execution frequency. Implement using timer and last execution time. Ensure minimum time between executions. Support custom throttle intervals.
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.
Form events include submit, reset, change. Prevent default submission. Handle validation. Collect form data. Support dynamic forms.
Custom modifiers use actions (use:). Implement modifier logic. Support parameters. Handle cleanup. Share across components.
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.
Scroll events track scroll position. Implement scroll handlers. Support infinite scroll. Handle scroll optimization. Manage scroll restoration.
Window events use svelte:window component. Listen to resize, scroll, online/offline. Handle cleanup. Support event parameters.
Complex patterns combine multiple events. Handle event sequences. Implement state machines. Support event composition. Manage event flow.
Event middleware intercepts and transforms events. Implement custom logic. Support middleware chain. Handle async middleware. Manage middleware order.
Event logging tracks event occurrences. Implement logging system. Handle event details. Support filtering. Manage log storage.
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 testing verifies event handling. Implement test utilities. Mock events. Support integration testing. Handle async events.
Event documentation describes event behavior. Generate documentation automatically. Support example usage. Handle event versioning.
Event error handling catches and processes errors. Implement error boundaries. Support error recovery. Handle error reporting.
Event optimization improves handling efficiency. Implement event pooling. Handle event batching. Support event prioritization.