Event delegation handles events at a higher level in the DOM tree rather than individual elements. React implements this automatically through its event system. Benefits include better memory usage and handling dynamic elements.
Use onKeyDown, onKeyPress, onKeyUp events. Check event.key or event.keyCode for specific keys. Consider accessibility, focus management, and keyboard shortcuts. Handle modifier keys (Ctrl, Alt, Shift) appropriately.
Handle touchstart, touchmove, touchend events. Consider touch gestures, preventing scroll during touch interactions, and handling multi-touch. Test on various devices and implement fallbacks for desktop.
Use event.stopPropagation() to prevent bubbling, organize handlers hierarchically, consider event delegation, and handle event order carefully. Avoid deeply nested event handling logic.
Synthetic events are React's cross-browser wrapper around native DOM events. They provide consistent behavior across browsers, follow the W3C spec, and use a pooling mechanism for performance. Access native events via event.nativeEvent property.
Methods include: arrow functions in render, class fields with arrow functions, binding in constructor, or using function components with hooks. Each approach has performance and readability trade-offs. Example: onClick={() => this.handleClick()} or onClick={this.handleClick.bind(this)}.
Custom events can be created using new CustomEvent() and dispatched using dispatchEvent(). In React, prefer prop callbacks or event emitters for component communication. Handle cleanup for custom event listeners.
Use useCallback for memoized event handlers, useEffect for event listener setup/cleanup, and useState for handling event state. Example: const handleClick = useCallback(() => setState(newValue), [dependencies]).
Use onFocus and onBlur events, manage focus state, implement keyboard navigation, and follow ARIA guidelines. Consider focus trapping for modals and proper tab order.
Use onCopy, onCut, onPaste events, handle clipboard API permissions, implement fallbacks for unsupported browsers, and consider security implications. Handle different data types in clipboard.
Events bubble up through React's virtual DOM hierarchy regardless of portal placement. Consider event propagation, handle cleanup properly, and manage portal lifecycle.
Use stopPropagation() to prevent event bubbling, preventDefault() to prevent default behavior, and capture phase events with onClickCapture. Example: onClick={(e) => { e.stopPropagation(); handleClick(); }}
Use custom hooks or utility functions for debounce/throttle. Consider cleanup on unmount. Example: const debouncedHandler = useDebounce(handler, delay). Handle edge cases and cancellation.
Form events (onChange, onSubmit) are handled using controlled components where form data is controlled by React state. Prevent default form submission with e.preventDefault(). Handle validation and submission logic in event handlers.
Use async/await or promises, handle loading and error states, prevent memory leaks with cleanup, consider debouncing/throttling, and handle component unmounting. Example: async handleClick() { try { await apiCall() } catch (error) { handleError() } }
Use HTML5 drag and drop events (onDragStart, onDrop, etc.). Implement dataTransfer for data passing. Consider using react-dnd or similar libraries for complex cases. Handle drag preview and drop zones.
Add listeners to window/document in useEffect, implement proper cleanup, consider context for sharing event handlers, and handle event delegation appropriately. Example: window.addEventListener('resize', handler).
Use React Testing Library or Enzyme to simulate events, test handler behavior, verify state changes, and check component updates. Mock complex event objects and test error scenarios.
Use throttling or requestAnimationFrame for scroll handlers, consider intersection observer for scroll detection, and implement cleanup properly. Handle scroll position restoration and virtual scrolling.
Handle play, pause, loadeddata, error events for audio/video elements. Implement proper cleanup, manage playback state, and handle loading/buffering. Consider mobile device considerations.
Create custom hooks for intersection observer, handle observer setup/cleanup, manage intersection state, and implement proper threshold configuration. Use for infinite scroll or lazy loading.
Use input type='file' with onChange event. Access files through event.target.files. Handle multiple files, file validation, progress events, and error cases. Consider using FormData for uploads.
Implement try-catch blocks, use error boundaries for component errors, handle async errors properly, provide user feedback, and log errors appropriately. Consider graceful degradation and recovery.
Set up WebSocket connections in useEffect, handle connection events, implement proper cleanup, and manage message events. Consider reconnection logic and error handling.
Create hooks that encapsulate event logic, handle setup/cleanup, manage event state, and provide simple interfaces. Example: useEventListener hook for declarative event handling.
Prevent default submission, validate inputs, handle async submission, show loading/error states, and manage form state properly. Consider multi-step forms and partial submissions.
Handle animation start/end events, manage animation state, implement cleanup for interrupted animations, and consider performance. Use requestAnimationFrame for smooth animations.
Handle hydration mismatches, avoid accessing window/document during SSR, implement proper event attachment after hydration, and consider initial state handling.
React 17+ removed event pooling, but understanding includes: using event.persist() for async access in older versions, handling synthetic event limitations, and managing event object lifecycle.
