🖱️ React Event Handling System

Events in React

An event is something that happens in the browser that your code can respond to: a click, a key press, a mouse moving, a form being submitted. React lets you respond to these by passing a function to a JSX prop like onClick — no addEventListener, no manual cleanup.

If you've written vanilla JavaScript, React's approach will feel familiar but tidier. Instead of finding an element and attaching a listener, you declare the handler right where the element lives:

function LikeButton() {
  const handleClick = () => {
    console.log('Liked!');
  };

  // Pass the FUNCTION, not a call — no parentheses
  return <button onClick={handleClick}>👍 Like</button>;
}

Key differences from raw DOM events

• React props use camelCase — onClick, not onclick; onMouseEnter, not onmouseenter.
• You pass a function reference, not a string of code.
• React wraps native events in a SyntheticEvent for consistent cross-browser behavior.
• Returning false does not prevent default behavior — you must call event.preventDefault() explicitly.

The SyntheticEvent System

React does not attach a separate listener to every element. Instead, it attaches listeners at the root of your app and uses event delegation internally. When an event fires, React wraps the native event in a SyntheticEvent object and routes it to your handler.

💡 Analogy: Think of the SyntheticEvent as a universal power adapter. Different browsers historically "used different plugs" for events; React's adapter gives your code one consistent shape to work with, no matter which browser the user is on.

A SyntheticEvent follows the same W3C interface as a native event, so the properties you already know are all there:

function Button() {
  const handleClick = (event) => {
    console.log('Event type:', event.type);       // "click"
    console.log('Target element:', event.target);  // the <button>
    console.log('Native event:', event.nativeEvent); // the raw browser event
  };

  return <button onClick={handleClick}>Inspect me</button>;
}

Common Event Types

React exposes the whole family of DOM events as camelCased props. Here are the ones you'll reach for most.

Mouse events

import { useState } from 'react';

function HoverTracker() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const [hovering, setHovering] = useState(false);

  const handleMouseMove = (e) => {
    setPos({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY });
  };

  return (
    <div
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setHovering(true)}
      onMouseLeave={() => setHovering(false)}
      style={{ width: 300, height: 160, border: '1px solid var(--border-color)' }}
    >
      <p>Pointer: {pos.x}, {pos.y}</p>
      {hovering && <p>Hovering!</p>}
    </div>
  );
}

Keyboard events

function NoDigitsInput() {
  const [value, setValue] = useState('');

  const handleKeyDown = (e) => {
    // Block digit keys while still allowing Backspace, arrows, etc.
    if (/^\d$/.test(e.key)) {
      e.preventDefault();
    }
  };

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onKeyDown={handleKeyDown}
      placeholder="Letters only"
    />
  );
}

Form & focus events

Forms get a full lesson of their own next — here we'll just note that onSubmit handlers almost always start with e.preventDefault() to stop the browser reloading the page.

Writing Event Handlers

Inline vs. named handlers

For a one-liner, an inline arrow function is perfectly fine. Once the logic grows past a line or two, pull it out into a named function so your JSX stays readable:

// Fine for trivial logic
<button onClick={() => setOpen(true)}>Open</button>

// Better once there's real work to do
function Panel() {
  const handleOpen = () => {
    setOpen(true);
    logAnalytics('panel_opened');
    focusFirstField();
  };
  return <button onClick={handleOpen}>Open</button>;
}

Passing arguments to a handler

When you need to pass extra data — like which list item was clicked — wrap the call in an arrow function so it runs on the event, not during render:

function ItemList() {
  const items = ['Apple', 'Banana', 'Cherry'];

  const handleItemClick = (item, index, event) => {
    console.log(`Clicked ${item} at index ${index}`, event.type);
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li key={item} onClick={(e) => handleItemClick(item, index, e)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

Propagation, Capture & Default

Just like native DOM events, React events travel through the tree in phases: they capture downward from the root to the target, then bubble back up from the target to the root.

Stopping propagation

Call event.stopPropagation() to keep an event from reaching ancestor handlers — handy when a clickable card contains its own clickable button:

function Card({ onOpen }) {
  return (
    <div onClick={onOpen} style={{ cursor: 'pointer' }}>
      <h3>Report</h3>
      <button
        onClick={(e) => {
          e.stopPropagation(); // don't also trigger onOpen
          downloadReport();
        }}
      >
        Download
      </button>
    </div>
  );
}

Capture-phase handlers

Append Capture to any event prop to run during the capture phase instead of the bubble phase:

<div
  onClickCapture={() => console.log('outer capture (runs first)')}
  onClick={() => console.log('outer bubble (runs last)')}
>
  <button onClick={() => console.log('button bubble')}>Click</button>
</div>
// Order: outer capture → button bubble → outer bubble

Preventing default behavior

Use event.preventDefault() to cancel the browser's built-in action — submitting a form, following a link, or scrolling on spacebar:

function NewsletterForm() {
  const handleSubmit = (e) => {
    e.preventDefault();       // stop the full-page reload
    console.log('Submitting via fetch instead');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" required />
      <button type="submit">Subscribe</button>
    </form>
  );
}

💡 Analogy: Bubbling is like an announcement echoing outward through nested rooms. stopPropagation() soundproofs a room so the echo stays inside; preventDefault() is more like telling the building "ignore your usual fire-drill response to that alarm."

Handler Performance

Every render creates fresh inline handler functions. That's usually harmless — but when you pass a handler to a child wrapped in React.memo, a new function each render defeats the memoization and re-renders the child anyway.

The problem and the fix

import { useState, useCallback, memo } from 'react';

// Child only re-renders when its props change by reference
const Child = memo(function Child({ onClick }) {
  console.log('Child rendered');
  return <button onClick={onClick}>Increment</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  // useCallback keeps the SAME function reference across renders
  const handleClick = useCallback(() => {
    setCount((c) => c + 1); // functional update — no `count` dependency
  }, []);

  return (
    <>
      <p>Count: {count}</p>
      <Child onClick={handleClick} />
    </>
  );
}

Hands-on Exercise

import { useState, useCallback, memo } from 'react';

const StepButton = memo(function StepButton({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
});

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount((c) => c + 1), []);
  const decrement = () => setCount((c) => Math.max(0, c - 1));
  const reset = () => setCount(0);

  const handleKeyDown = (e) => {
    if (e.key === 'ArrowUp') { e.preventDefault(); increment(); }
    if (e.key === 'ArrowDown') { e.preventDefault(); decrement(); }
  };

  return (
    <div
      tabIndex={0}
      onKeyDown={handleKeyDown}
      style={{ padding: 16, border: '1px solid var(--border-color)' }}
    >
      <p>Count: {count}</p>
      <StepButton label="＋" onClick={increment} />
      <button onClick={decrement}>−</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Best Practices

Summary & Quiz

📚 Further Reading

• React — Responding to Events
• React — Common component props & events
• MDN — Introduction to events

🚀 What's Next?

Now that you can respond to any interaction, the next lesson focuses on the interaction developers handle most: forms. We'll manage input state, wire up submission, and validate what users type.