React · Adding Interactivity

Responding to Events

Master the art of making your React apps interactive! Learn how to handle clicks, keyboard input, form submissions, and more with event handlers.

Find videos you like?

Save to resource drawer for future reference!

Understanding Events

Events are the bridge between users and your application - learn how to listen and respond!

Events are actions that happen in your application - clicks, keyboard input, mouse movements, form submissions, and more. React provides event handlers that let you respond to these actions by executing code when they occur. Think of events as user conversations and event handlers as your responses!

How Events Work in React

👆

User Action

Click, type, move

Trigger

↓

🎯

Event Fired

onClick, onChange

Dispatch

↓

⚡

Handler Runs

Your code executes

Execute

User Interactions

• Mouse clicks & movements
• Keyboard input
• Touch gestures
• Form submissions

Event System

• Synthetic events
• Event delegation
• Cross-browser support
• Performance optimized

Response Actions

• State updates
• UI changes
• API calls
• Navigation

React's Event System

Optimized for performance and consistency

Active

Real-World Examples

🖱️ Mouse Events: Click, hover, drag, scroll
⌨️ Keyboard Events: Type, press keys, shortcuts
📱 Touch Events: Tap, swipe, pinch on mobile
📝 Form Events: Submit, input changes, focus

Click Events - The Foundation

Master the most common event type - onClick! Learn how to make buttons, links, and any element interactive.

The onClick event is your gateway to interactivity. It fires when a user clicks on an element, allowing you to trigger actions like showing messages, changing colors, counting clicks, or navigating to different pages. Click events work on buttons, divs, images, and almost any JSX element!

onClick Event Syntax

Basic Structure:

const handleClick = () => {

console.log("Clicked!");

}

// Usage: <button onClick={handleClick}>Click Me</button>

Inline Function:

// Usage: <button onClick={() => alert("Hello!")}>Click Me</button>

Form Events - User Input

Handle text input, form submissions, and keyboard interactions with onChange and onSubmit events!

Form events let you capture user input through text fields, textareas, and form submissions. The onChange event fires whenever input changes, while onSubmit handles form submissions. These events are essential for creating search bars, login forms, contact forms, and any interactive input fields.

Common Form Events

onChange

Fires every time input value changes. Perfect for real-time validation, search suggestions, or character counting.

onSubmit

Fires when form is submitted. Essential for handling login, registration, and contact form submissions.

Advanced Event Patterns

Master sophisticated event handling techniques for professional React applications!

Beyond basic click and form events, React offers powerful patterns for creating sophisticated interactions. Learn about event propagation, custom event handlers, keyboard shortcuts, and performance optimization techniques that will take your applications to the next level.

Event Propagation

Bubbling: Events bubble up from child to parent

Capturing: Events flow down from parent to child

stopPropagation(): Prevents further bubbling

Keyboard Events

onKeyDown: When key is pressed down

onKeyUp: When key is released

e.key: Which key was pressed

Mouse Events

onMouseEnter/Leave: Hover effects

onMouseMove: Track cursor position

onWheel: Scroll wheel events

Performance Tips

Debounce: Delay expensive operations

Throttle: Limit event firing rate

useCallback: Prevent unnecessary re-renders

🚀 Pro Tips

🎯 Event Object: Access event data with the event parameter
⚡ Synthetic Events: React wraps native events for cross-browser compatibility
🔧 preventDefault(): Stop default browser behavior
📱 Touch Events: Use onTouchStart/onTouchEnd for mobile interactions

Best Practices & Common Pitfalls

Master event handling with these essential guidelines and avoid common mistakes!

✅ Do This

•Use descriptive handler names - handleClick, handleSubmit, onInputChange
•Extract complex logic - Keep event handlers clean and focused
•Use preventDefault() in forms - Stop page refresh on submit
•Handle accessibility - Add keyboard support for interactive elements
•Optimize performance - Use useCallback for expensive handlers
•Test event handlers - Ensure they work as expected

❌ Avoid This

•Don't use inline functions in loops - Causes performance issues
•Don't forget preventDefault() - Forms will refresh the page
•Don't ignore accessibility - All interactive elements need keyboard support
•Don't mutate state directly - Always use setState or proper updates
•Don't create memory leaks - Clean up event listeners in useEffect
•Don't over-optimize prematurely - Focus on clarity first

Quick Reference

Essential event handlers and patterns for quick lookup!

🖱️

Mouse Events

onClick={handleClick}

onDoubleClick={handleDoubleClick}

onMouseDown={handleMouseDown}

onMouseUp={handleMouseUp}

onMouseEnter={handleHover}

onMouseLeave={handleLeave}

onMouseMove={handleMouseMove}

onWheel={handleWheel}

⌨️

Keyboard Events

onKeyDown={handleKeyDown}

onKeyUp={handleKeyUp}

onKeyPress={handleKeyPress}

onInput={handleInput}

onCompositionStart={handleCompStart}

onCompositionEnd={handleCompEnd}

📝

Form Events

onSubmit={handleSubmit}

onChange={handleChange}

onInput={handleInput}

onFocus={handleFocus}

onBlur={handleBlur}

onReset={handleReset}

onSelect={handleSelect}

📱

Touch Events

onTouchStart={handleTouchStart}

onTouchEnd={handleTouchEnd}

onTouchMove={handleTouchMove}

onTouchCancel={handleCancel}

🎵

Media Events

onPlay={handlePlay}

onPause={handlePause}

onEnded={handleEnded}

onTimeUpdate={handleTimeUpdate}

onVolumeChange={handleVolumeChange}

onLoadedData={handleLoadedData}

🪟

Window Events

onScroll={handleScroll}

onResize={handleResize}

onLoad={handleLoad}

onUnload={handleUnload}

onError={handleError}

onBeforeUnload={handleBeforeUnload}

🎯

Focus Events

onFocus={handleFocus}

onBlur={handleBlur}

onFocusIn={handleFocusIn}

onFocusOut={handleFocusOut}

📋

Clipboard Events

onCopy={handleCopy}

onCut={handleCut}

onPaste={handlePaste}

✋

Drag Events

onDrag={handleDrag}

onDragStart={handleDragStart}

onDragEnd={handleDragEnd}

onDragOver={handleDragOver}

onDrop={handleDrop}

onDragEnter={handleDragEnter}

onDragLeave={handleDragLeave}

Event Object Properties

Mouse Events:

e.clientX, e.clientY

e.pageX, e.pageY

e.screenX, e.screenY

e.button, e.buttons

e.shiftKey, e.ctrlKey

Keyboard Events:

e.key, e.code

e.keyCode, e.which

e.shiftKey, e.ctrlKey

e.altKey, e.metaKey

e.repeat

Form Events:

e.target.value

e.target.name

e.target.files

e.target.checked

e.target.selectedOptions

Touch Events:

e.touches

e.targetTouches

e.changedTouches

e.force

Common Methods:

e.preventDefault()

e.stopPropagation()

e.stopImmediatePropagation()

e.currentTarget

Event Types:

e.type

e.timeStamp

e.isTrusted

e.bubbles

e.cancelable

Event Object Properties

Discover what information you get when an event fires! The event object is packed with useful data about the interaction.

Every event handler receives an event object as a parameter. This object contains valuable information about the event - what triggered it, where it happened, keyboard keys pressed, mouse position, and much more. Understanding these properties unlocks powerful interactive capabilities!

Basic Properties

typeEvent type

targetElement

currentTargetHandler element

timeStampTimestamp

Mouse Events

clientX/YWindow pos

pageX/YPage pos

buttonMouse button

buttonsPressed buttons

Keyboard Events

keyKey value

codePhysical key

ctrlKeyCtrl pressed

shiftKeyShift pressed

Event Control

preventDefault()Stop default

stopPropagation()Stop bubbling

bubblesWill bubble

cancelableCan cancel

Previous Topic

Rendering Lists

Render dynamic lists with map(), understand keys, filtering, sorting, and list performance optimization.

Next Topic

State & Memory

Introduction to state with useState, understanding state vs props, and how state triggers re-renders.

Ask a Question

Have a question about Handling Events? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Adding Interactivity

Responding to Events

Master the art of making your React apps interactive! Learn how to handle clicks, keyboard input, form submissions, and more with event handlers.

Find videos you like?

Save to resource drawer for future reference!

Understanding Events

Events are the bridge between users and your application - learn how to listen and respond!

How Events Work in React

👆

User Action

Click, type, move

Trigger

↓

🎯

Event Fired

onClick, onChange

Dispatch

↓

⚡

Handler Runs

Your code executes

Execute

User Interactions

• Mouse clicks & movements
• Keyboard input
• Touch gestures
• Form submissions

Event System

• Synthetic events
• Event delegation
• Cross-browser support
• Performance optimized

Response Actions

• State updates
• UI changes
• API calls
• Navigation

React's Event System

Optimized for performance and consistency

Active

Real-World Examples

Click Events - The Foundation

Master the most common event type - onClick! Learn how to make buttons, links, and any element interactive.

onClick Event Syntax

Basic Structure:

const handleClick = () => {

console.log("Clicked!");

}

// Usage: <button onClick={handleClick}>Click Me</button>

Inline Function:

// Usage: <button onClick={() => alert("Hello!")}>Click Me</button>

Form Events - User Input

Handle text input, form submissions, and keyboard interactions with onChange and onSubmit events!

Common Form Events

onChange

Fires every time input value changes. Perfect for real-time validation, search suggestions, or character counting.

onSubmit

Fires when form is submitted. Essential for handling login, registration, and contact form submissions.

Advanced Event Patterns

Master sophisticated event handling techniques for professional React applications!

Event Propagation

Bubbling: Events bubble up from child to parent

Capturing: Events flow down from parent to child

stopPropagation(): Prevents further bubbling

Keyboard Events

onKeyDown: When key is pressed down

onKeyUp: When key is released

e.key: Which key was pressed

Mouse Events

onMouseEnter/Leave: Hover effects

onMouseMove: Track cursor position

onWheel: Scroll wheel events

Performance Tips

Debounce: Delay expensive operations

Throttle: Limit event firing rate

useCallback: Prevent unnecessary re-renders

🚀 Pro Tips

Best Practices & Common Pitfalls

Master event handling with these essential guidelines and avoid common mistakes!

✅ Do This

•Use descriptive handler names - handleClick, handleSubmit, onInputChange
•Extract complex logic - Keep event handlers clean and focused
•Use preventDefault() in forms - Stop page refresh on submit
•Handle accessibility - Add keyboard support for interactive elements
•Optimize performance - Use useCallback for expensive handlers
•Test event handlers - Ensure they work as expected

❌ Avoid This

•Don't use inline functions in loops - Causes performance issues
•Don't forget preventDefault() - Forms will refresh the page
•Don't ignore accessibility - All interactive elements need keyboard support
•Don't mutate state directly - Always use setState or proper updates
•Don't create memory leaks - Clean up event listeners in useEffect
•Don't over-optimize prematurely - Focus on clarity first

Quick Reference

Essential event handlers and patterns for quick lookup!

🖱️

Mouse Events

onClick={handleClick}

onDoubleClick={handleDoubleClick}

onMouseDown={handleMouseDown}

onMouseUp={handleMouseUp}

onMouseEnter={handleHover}

onMouseLeave={handleLeave}

onMouseMove={handleMouseMove}

onWheel={handleWheel}

⌨️

Keyboard Events

onKeyDown={handleKeyDown}

onKeyUp={handleKeyUp}

onKeyPress={handleKeyPress}

onInput={handleInput}

onCompositionStart={handleCompStart}

onCompositionEnd={handleCompEnd}

📝

Form Events

onSubmit={handleSubmit}

onChange={handleChange}

onInput={handleInput}

onFocus={handleFocus}

onBlur={handleBlur}

onReset={handleReset}

onSelect={handleSelect}

📱

Touch Events

onTouchStart={handleTouchStart}

onTouchEnd={handleTouchEnd}

onTouchMove={handleTouchMove}

onTouchCancel={handleCancel}

🎵

Media Events

onPlay={handlePlay}

onPause={handlePause}

onEnded={handleEnded}

onTimeUpdate={handleTimeUpdate}

onVolumeChange={handleVolumeChange}

onLoadedData={handleLoadedData}

🪟

Window Events

onScroll={handleScroll}

onResize={handleResize}

onLoad={handleLoad}

onUnload={handleUnload}

onError={handleError}

onBeforeUnload={handleBeforeUnload}

🎯

Focus Events

onFocus={handleFocus}

onBlur={handleBlur}

onFocusIn={handleFocusIn}

onFocusOut={handleFocusOut}

📋

Clipboard Events

onCopy={handleCopy}

onCut={handleCut}

onPaste={handlePaste}

✋

Drag Events

onDrag={handleDrag}

onDragStart={handleDragStart}

onDragEnd={handleDragEnd}

onDragOver={handleDragOver}

onDrop={handleDrop}

onDragEnter={handleDragEnter}

onDragLeave={handleDragLeave}

Event Object Properties

Mouse Events:

e.clientX, e.clientY

e.pageX, e.pageY

e.screenX, e.screenY

e.button, e.buttons

e.shiftKey, e.ctrlKey

Keyboard Events:

e.key, e.code

e.keyCode, e.which

e.shiftKey, e.ctrlKey

e.altKey, e.metaKey

e.repeat

Form Events:

e.target.value

e.target.name

e.target.files

e.target.checked

e.target.selectedOptions

Touch Events:

e.touches

e.targetTouches

e.changedTouches

e.force

Common Methods:

e.preventDefault()

e.stopPropagation()

e.stopImmediatePropagation()

e.currentTarget

Event Types:

e.type

e.timeStamp

e.isTrusted

e.bubbles

e.cancelable

Event Object Properties

Discover what information you get when an event fires! The event object is packed with useful data about the interaction.

Basic Properties

typeEvent type

targetElement

currentTargetHandler element

timeStampTimestamp

Mouse Events

clientX/YWindow pos

pageX/YPage pos

buttonMouse button

buttonsPressed buttons

Keyboard Events

keyKey value

codePhysical key

ctrlKeyCtrl pressed

shiftKeyShift pressed

Event Control

preventDefault()Stop default

stopPropagation()Stop bubbling

bubblesWill bubble

cancelableCan cancel

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Rendering Lists

State & Memory

Building Your Learning Module...

Responding to Events

How Events Work in React

User Action

Event Fired

Handler Runs

User Interactions

Event System

Response Actions

Real-World Examples

onClick Event Syntax

Common Form Events

onChange

onSubmit

Event Propagation

Keyboard Events

Mouse Events

Performance Tips

🚀 Pro Tips

Best Practices & Common Pitfalls

✅ Do This

❌ Avoid This

Mouse Events

Keyboard Events

Form Events

Touch Events

Media Events

Window Events

Focus Events

Clipboard Events

Drag Events

Event Object Properties

Basic Properties

Mouse Events

Keyboard Events

Event Control

Rendering Lists

State & Memory

Responding to Events

How Events Work in React

User Action

Event Fired

Handler Runs

User Interactions

Event System

Response Actions

Real-World Examples

onClick Event Syntax

Common Form Events

onChange

onSubmit

Event Propagation

Keyboard Events

Mouse Events

Performance Tips

🚀 Pro Tips

Best Practices & Common Pitfalls

✅ Do This

❌ Avoid This

Mouse Events

Keyboard Events

Form Events

Touch Events

Media Events

Window Events

Focus Events

Clipboard Events

Drag Events

Event Object Properties

Basic Properties

Mouse Events

Keyboard Events

Event Control