🎪 Event Handling Basics

React uses a synthetic event system that wraps browser events in a cross-browser compatible layer. This makes event handling consistent across all browsers.

Key Concepts

• **Synthetic Events**: React's abstraction over browser events

• **Event Objects**: Contains event data like target, value, etc.

• **Event Naming**: React uses camelCase (onClick, onChange)

• **Event Pooling**: Performance optimization (React 16 and earlier)

Basic Event Handler Pattern

function Button() {
  const handleClick = (event) => {
    console.log("Button clicked!", event);
  };

  return <button onClick={handleClick}>Click Me</button>;
}

Common Event Properties

Event Handler Patterns

Pattern 1: Direct Function Reference

<button onClick={handleClick}>Click</button>

Pattern 2: Arrow Function (with parameters)

<button onClick={(e) => handleClick(123, e)}>Click</button>

Pattern 3: Bind in Constructor (Class Components)

this.handleClick = this.handleClick.bind(this);

Event Types in React

React supports all HTML events but uses camelCase naming:

• `onClick` - Mouse click

• `onChange` - Input value changes

• `onSubmit` - Form submission

• `onFocus` / `onBlur` - Focus events

• `onKeyDown` / `onKeyUp` - Keyboard events

✅ Key Takeaways

• React uses **synthetic events** for cross-browser compatibility

• Event handlers use **camelCase** naming (`onClick`, not `onclick`)

• Access event data via the **event object parameter**

• Use `preventDefault()` and `stopPropagation()` as needed