React Events

Event Handling

React uses a camelCase naming convention for events.

Basic Event Handling

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

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

Event with Arguments

function TodoItem({ todo, onDelete }) {
  return (
    <div>
      <span>{todo.text}</span>
      <button onClick={() => onDelete(todo.id)}>
        Delete
      </button>
    </div>
  );
}

Common Events

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form submitted");
  };

  const handleChange = (e) => {
    console.log(e.target.value);
  };

  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      console.log("Enter pressed");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} onKeyDown={handleKeyDown} />
      <button type="submit">Submit</button>
    </form>
  );
}

Synthetic Events

React wraps native DOM events in Synthetic Events for cross-browser compatibility.

What are Synthetic Events?

• Wrapper around native DOM events
• Same interface as native events
• Cross-browser compatible
• Pooled for performance

Accessing Native Event

function handleClick(e) {
  // Synthetic event
  console.log(e.type);

  // Access native event if needed
  console.log(e.nativeEvent);
  console.log(e.nativeEvent.target);
}

Event Object

function handleEvent(e) {
  // Common properties
  console.log(e.type);          // "click"
  console.log(e.target);        // Element that triggered
  console.log(e.currentTarget); // Element with handler
  console.log(e.timeStamp);     // Time of event

  // Mouse events
  console.log(e.clientX);       // X position
  console.log(e.clientY);       // Y position
  console.log(e.button);        // Mouse button

  // Keyboard events
  console.log(e.key);           // "Enter", "Tab", etc.
  console.log(e.code);          // "KeyA", "Space", etc.
  console.log(e.shiftKey);      // Shift held?
  console.log(e.ctrlKey);       // Ctrl held?
}

Preventing Default Behavior

function Link({ href, children }) {
  const handleClick = (e) => {
    e.preventDefault(); // Prevent navigation
    console.log("Link clicked");
  };

  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  );
}

Stopping Propagation

function Parent() {
  const handleParent = () => console.log("Parent clicked");

  return (
    <div onClick={handleParent}>
      <Child />
    </div>
  );
}

function Child() {
  const handleChild = (e) => {
    e.stopPropagation(); // Don't bubble to parent
    console.log("Child clicked");
  };

  return <button onClick={handleChild}>Click</button>;
}

Event Handler Patterns

Inline Handlers

// Simple - OK for small handlers
<button onClick={() => console.log("clicked")}>Click</button>

// With arguments
<button onClick={() => handleClick(id)}>Delete</button>

// Avoid complex logic inline
<button onClick={() => {
  // Too much logic here
  const result = doSomething();
  if (result) {
    doSomethingElse();
  }
}}>Click</button>

Named Handlers

// Better for complex logic
function TodoItem({ todo, onDelete, onToggle }) {
  const handleDelete = () => {
    if (window.confirm("Are you sure?")) {
      onDelete(todo.id);
    }
  };

  const handleToggle = () => {
    onToggle(todo.id);
  };

  return (
    <div>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={handleToggle}
      />
      <span>{todo.text}</span>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}

Handler with Event Object

function SearchInput({ onSearch }) {
  const handleChange = (e) => {
    const value = e.target.value;
    onSearch(value);
  };

  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      onSearch(e.target.value);
    }
  };

  return (
    <input
      onChange={handleChange}
      onKeyDown={handleKeyDown}
      placeholder="Search..."
    />
  );
}

Passing Data to Handlers

function UserList({ users, onSelect }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          <button onClick={() => onSelect(user.id)}>
            {user.name}
          </button>
        </li>
      ))}
    </ul>
  );
}