React Events

by

React applications are not just made of components and data. They also need to respond to what users do.

A user might click a button, type into a form, submit information, move the mouse over an element, press a keyboard key, focus on an input, or interact with a touch-enabled device. These actions are called events.

React provides a simple way to respond to these actions by attaching event handlers to JSX elements.

For example:

function App() {
  function handleClick() {
    alert("Button clicked!");
  }

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

export default App;

Here, onClick tells React what should happen when the button is clicked.

React events are similar to browser events, but React provides a consistent event-handling system that works naturally with components, props, and state.

This chapter covers the most important React event concepts, including click events, form events, keyboard events, event objects, preventing default browser behavior, event propagation, bubbling, and capturing.

What Are React Events?

An event is an action that happens in an application.

Some events are caused by the user:

  • Clicking a button
  • Typing into an input
  • Submitting a form
  • Moving the mouse
  • Pressing a keyboard key
  • Focusing on an input
  • Moving a pointer or touching a screen

Other events can come from the browser or application environment.

In React, you can listen for these events by adding event handler props to JSX elements.

For example:

function App() {
  function handleClick() {
    console.log("Button was clicked");
  }

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

When the user clicks the button, React calls the handleClick function.

React Event Syntax

React event names use camelCase.

For example:

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

Not:

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

Common React events include:

EventUsed for
onClickMouse or pointer click
onChangeInput value changes
onSubmitForm submission
onMouseEnterPointer enters an element
onMouseLeavePointer leaves an element
onKeyDownKeyboard key is pressed
onKeyUpKeyboard key is released
onFocusElement receives focus
onBlurElement loses focus
onPointerDownPointer button is pressed
onPointerUpPointer button is released

React lets you combine these events with state to create interactive applications.

Why Are Events Important in React?

Events are one of the main ways React applications become interactive.

Without events, a React application would mostly display information without responding to the user.

For example, consider a login form.

The user:

  1. Enters an email.
  2. Enters a password.
  3. Clicks the login button.
  4. The application validates the information.
  5. The application displays a result.

Each of these actions can involve React events.

A simplified example:

import { useState } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");

  function handleSubmit(event) {
    event.preventDefault();

    console.log("Submitted:", email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        placeholder="Email"
      />

      <button type="submit">
        Login
      </button>
    </form>
  );
}

export default LoginForm;

Events connect the user’s actions to your application’s logic.

How React Event Handling Works

The basic process is straightforward:

User action → React detects event → Event handler runs → State or UI may update

For example:

function App() {
  function handleClick() {
    console.log("Hello React");
  }

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

When the user clicks the button:

  1. The browser detects the click.
  2. React handles the event.
  3. React calls handleClick.
  4. The JavaScript inside handleClick executes.

If the event handler changes state, React can render the component again.

import { useState } from "react";

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

  function handleClick() {
    setCount(count + 1);
  }

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

export default Counter;

Every click updates the state, causing the displayed count to change.

Event Handler Functions

An event handler is a function that runs when a particular event occurs.

Example:

function App() {
  function handleClick() {
    console.log("Clicked!");
  }

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

Here:

  • handleClick is the event handler.
  • onClick tells React when to use it.

You can name event handlers whatever you want, but names beginning with handle are common:

handleClick
handleSubmit
handleChange
handleKeyDown
handleFocus

These names make the code easier to understand.

Passing an Event Handler Correctly

One of the most common beginner mistakes is accidentally calling the function while rendering.

Correct:

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

Incorrect:

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

The first version gives React the function.

The second version calls the function immediately while React is rendering the component.

With Arguments

If you need to pass an argument, use a function wrapper:

<button onClick={() => handleDelete(10)}>
  Delete
</button>

React will execute the arrow function when the button is clicked.

The onClick Event

onClick is one of the most frequently used React events.

It runs when the user clicks an element.

function App() {
  function handleClick() {
    alert("You clicked the button!");
  }

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

export default App;

Updating State with onClick

Events are often used to update state.

import { useState } from "react";

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

  function increaseCount() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>

      <button onClick={increaseCount}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

Every click changes the state.

Multiple Buttons

Different buttons can use different event handlers.

function App() {
  function handleSave() {
    console.log("Saved");
  }

  function handleCancel() {
    console.log("Cancelled");
  }

  return (
    <div>
      <button onClick={handleSave}>
        Save
      </button>

      <button onClick={handleCancel}>
        Cancel
      </button>
    </div>
  );
}

export default App;

The onChange Event

onChange is commonly used with form controls such as:

  • <input>
  • <textarea>
  • <select>

For text inputs, it runs when the input’s value changes.

import { useState } from "react";

function App() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input
        value={name}
        onChange={handleChange}
        placeholder="Enter your name"
      />

      <p>Hello, {name}</p>
    </div>
  );
}

export default App;

Understanding event.target.value

When the user types into the input:

event.target.value

contains the current value of that input.

So this:

setName(event.target.value);

stores the user’s latest input in state.

This pattern is extremely common in React forms.

The onSubmit Event

The onSubmit event is used with forms.

Instead of putting the submit logic directly on the button, React applications commonly attach it to the <form>.

function App() {
  function handleSubmit(event) {
    event.preventDefault();

    console.log("Form submitted");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="Enter your name" />

      <button type="submit">
        Submit
      </button>
    </form>
  );
}

export default App;

The form’s onSubmit handler runs when the user submits the form.

This can happen when the user:

  • Clicks the submit button.
  • Presses Enter in an appropriate form field.

The onMouseEnter Event

onMouseEnter runs when the pointer enters an element.

function App() {
  function handleMouseEnter() {
    console.log("Mouse entered");
  }

  return (
    <div onMouseEnter={handleMouseEnter}>
      Move your mouse here
    </div>
  );
}

export default App;

This can be useful for:

  • Showing additional information
  • Changing a visual state
  • Displaying a tooltip
  • Previewing content
  • Highlighting an item

For example:

import { useState } from "react";

function ProductCard() {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <h2>Laptop</h2>

      {hovered && <p>View product details</p>}
    </div>
  );
}

export default ProductCard;

The onMouseLeave Event

onMouseLeave runs when the pointer leaves an element.

function App() {
  function handleMouseLeave() {
    console.log("Mouse left");
  }

  return (
    <div onMouseLeave={handleMouseLeave}>
      Move the mouse away
    </div>
  );
}

export default App;

It is commonly used together with onMouseEnter.

For example:

<div
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
>
  Product
</div>

This allows an application to respond when the user enters and leaves an element.

Keyboard Events

React provides several events for keyboard interactions.

The most common are:

  • onKeyDown
  • onKeyUp

onKeyDown

Runs when a key is pressed.

function App() {
  function handleKeyDown(event) {
    console.log("Key pressed:", event.key);
  }

  return (
    <input
      onKeyDown={handleKeyDown}
      placeholder="Press a key"
    />
  );
}

export default App;

If the user presses the A key, event.key will normally contain "a".

Detecting Enter

You can check which key was pressed.

function SearchBox() {
  function handleKeyDown(event) {
    if (event.key === "Enter") {
      console.log("Search submitted");
    }
  }

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

export default SearchBox;

onKeyUp

onKeyUp runs when a pressed key is released.

function App() {
  function handleKeyUp(event) {
    console.log("Released:", event.key);
  }

  return (
    <input
      onKeyUp={handleKeyUp}
      placeholder="Type something"
    />
  );
}

export default App;

Keyboard events are especially important for accessibility and applications where users interact without a mouse.

Focus Events

Focus events are commonly used with form fields.

The two important events are:

  • onFocus
  • onBlur

onFocus

Runs when an element receives focus.

function App() {
  function handleFocus() {
    console.log("Input focused");
  }

  return (
    <input
      onFocus={handleFocus}
      placeholder="Click here"
    />
  );
}

export default App;

onBlur

Runs when an element loses focus.

function App() {
  function handleBlur() {
    console.log("Input lost focus");
  }

  return (
    <input
      onBlur={handleBlur}
      placeholder="Click here"
    />
  );
}

export default App;

Focus Validation Example

Focus events can be useful for form validation.

import { useState } from "react";

function EmailField() {
  const [email, setEmail] = useState("");
  const [touched, setTouched] = useState(false);

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        onBlur={() => setTouched(true)}
        placeholder="Email"
      />

      {touched && email === "" && (
        <p>Please enter your email.</p>
      )}
    </div>
  );
}

export default EmailField;

Here, the validation message appears after the user leaves the input.

Pointer Events

Pointer events provide a unified way to respond to different types of pointing devices.

A pointer can come from:

  • Mouse
  • Touch
  • Pen or stylus

Common pointer events include:

  • onPointerDown
  • onPointerUp
  • onPointerMove
  • onPointerEnter
  • onPointerLeave

Example:

function App() {
  function handlePointerDown(event) {
    console.log("Pointer down:", event.pointerType);
  }

  return (
    <button onPointerDown={handlePointerDown}>
      Press Me
    </button>
  );
}

export default App;

event.pointerType can provide information about the type of pointer involved, such as "mouse", "touch", or "pen".

Pointer events are useful when building interfaces that need to work across different input devices.

Event Handlers

An event handler is simply a function that responds to an event.

Example:

function handleClick() {
  console.log("Clicked");
}

You can connect it to JSX:

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

Event handlers can also receive the event object:

function handleClick(event) {
  console.log(event);
}

React automatically passes the event object when it calls the handler.

Keeping Handlers Separate

For larger components, separate functions can make the code easier to read.

function App() {
  function handleSave() {
    console.log("Saving...");
  }

  function handleDelete() {
    console.log("Deleting...");
  }

  function handleCancel() {
    console.log("Cancelling...");
  }

  return (
    <div>
      <button onClick={handleSave}>Save</button>
      <button onClick={handleDelete}>Delete</button>
      <button onClick={handleCancel}>Cancel</button>
    </div>
  );
}

export default App;

Passing Arguments to Event Handlers

Sometimes an event handler needs additional information.

For example:

function handleDelete(id) {
  console.log("Deleting:", id);
}

You cannot write:

<button onClick={handleDelete(10)}>
  Delete
</button>

because this calls the function during rendering.

Instead, use an arrow function:

<button onClick={() => handleDelete(10)}>
  Delete
</button>

Now handleDelete(10) runs only when the button is clicked.

Passing Arguments in a List

This is common when rendering data with map().

function Products() {
  const products = [
    { id: 1, name: "Laptop" },
    { id: 2, name: "Keyboard" },
    { id: 3, name: "Mouse" }
  ];

  function handleDelete(id) {
    console.log("Delete product:", id);
  }

  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <span>{product.name}</span>

          <button onClick={() => handleDelete(product.id)}>
            Delete
          </button>
        </div>
      ))}
    </div>
  );
}

export default Products;

Each button sends its corresponding product ID.

The Event Object

React automatically provides an event object to event handlers.

Example:

function handleClick(event) {
  console.log(event);
}

The event object contains information about the event.

For example:

function handleClick(event) {
  console.log(event.type);
}

For a click event, this will identify the event type.

event.target

event.target refers to the element that originally triggered the event.

Example:

function handleClick(event) {
  console.log(event.target);
}

If the user clicks a button, the target will generally be that button.

event.currentTarget

event.currentTarget refers to the element whose event handler is currently handling the event.

This distinction becomes especially important when learning event propagation.

For example:

function handleClick(event) {
  console.log("Target:", event.target);
  console.log("Current target:", event.currentTarget);
}

They can be the same element, but they are not always the same.

event.key

Keyboard events provide information about the key.

function handleKeyDown(event) {
  console.log(event.key);
}

event.type

You can determine the type of event:

function handleEvent(event) {
  console.log(event.type);
}

The event object is useful whenever your event handler needs information about what happened.

preventDefault()

Some browser actions have a default behavior.

For example, submitting a normal HTML form can cause the browser to navigate or reload the page.

React applications commonly prevent this behavior using:

event.preventDefault();

Example:

function App() {
  function handleSubmit(event) {
    event.preventDefault();

    console.log("Form handled by React");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="Name" />

      <button type="submit">
        Submit
      </button>
    </form>
  );
}

export default App;

The form submission is now handled by your React code instead of allowing the browser’s default submission behavior.

When Should You Use preventDefault()?

Use it when you intentionally need to stop the browser’s default action.

Common examples include:

  • Handling form submission yourself
  • Preventing a link’s default navigation
  • Implementing custom interaction behavior

Do not use it automatically for every event. Only prevent default behavior when there is a reason to do so.

Event Propagation

Event propagation describes how an event travels through the DOM.

Consider:

<div>
  <button>Click Me</button>
</div>

When the button is clicked, the event does not exist only on the button. It can travel through the surrounding elements.

Event propagation is generally discussed in three phases:

  1. Capturing phase
  2. Target phase
  3. Bubbling phase

Understanding propagation becomes important when parent and child elements both have event handlers.

Event Bubbling

Event bubbling means an event can move from the target element upward through its ancestors.

Consider:

function App() {
  function handleParentClick() {
    console.log("Parent clicked");
  }

  function handleButtonClick() {
    console.log("Button clicked");
  }

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleButtonClick}>
        Click Me
      </button>
    </div>
  );
}

export default App;

When the button is clicked, the output can be:

Button clicked
Parent clicked

The click first reaches the button and then bubbles upward to the parent.

Stopping Bubbling

You can stop an event from continuing to propagate using:

event.stopPropagation();

Example:

function App() {
  function handleParentClick() {
    console.log("Parent clicked");
  }

  function handleButtonClick(event) {
    event.stopPropagation();

    console.log("Button clicked");
  }

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleButtonClick}>
        Click Me
      </button>
    </div>
  );
}

export default App;

Now clicking the button does not continue to the parent handler.

When Is Event Bubbling Useful?

Bubbling can actually be useful.

For example, a parent container can handle clicks from many child elements.

This technique is often called event delegation.

However, you should understand exactly which element is handling the event before relying on bubbling.

Event Capturing

Event capturing is the phase where an event travels from an outer ancestor toward the target element.

For example:

Parent
  ↓
Child
  ↓
Button

During capturing, the event travels toward the button.

During bubbling, it travels back upward:

Button
  ↑
Child
  ↑
Parent

Using Capture in React

React provides capture versions of many events.

For a click:

onClickCapture

Example:

function App() {
  function handleParentCapture() {
    console.log("Parent capture");
  }

  function handleButtonClick() {
    console.log("Button click");
  }

  return (
    <div onClickCapture={handleParentCapture}>
      <button onClick={handleButtonClick}>
        Click Me
      </button>
    </div>
  );
}

export default App;

The capture handler runs while the event is traveling down toward the target.

Capture vs Bubbling

The basic difference is:

PhaseDirectionExample
CapturingParent → TargetonClickCapture
TargetTarget elementButton’s click handler
BubblingTarget → ParentonClick

Most everyday React code uses normal bubbling event handlers such as onClick.

Capture handlers are useful when you specifically need to observe or handle events during the capturing phase.

Combining Events with State

Events become particularly powerful when combined with React state.

For example, a button can change a counter:

import { useState } from "react";

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

  function handleIncrease() {
    setCount((currentCount) => currentCount + 1);
  }

  return (
    <div>
      <h2>{count}</h2>

      <button onClick={handleIncrease}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

The event starts the action, and state controls the resulting UI.

This pattern appears everywhere in React applications:

User interaction
       ↓
Event handler
       ↓
State update
       ↓
React re-render
       ↓
Updated UI

Events and Component Communication

Events also work closely with props.

A parent component can pass a function to a child component.

function Parent() {
  function handleMessage() {
    console.log("Message received");
  }

  return <Child onMessage={handleMessage} />;
}

function Child({ onMessage }) {
  return (
    <button onClick={onMessage}>
      Send Message
    </button>
  );
}

export default Parent;

Here:

  1. The parent creates handleMessage.
  2. The parent passes it to the child through a prop.
  3. The child uses the function as an event handler.
  4. The child calls the function when the button is clicked.
  5. The parent’s function executes.

This is an important pattern for communication between components.

A Complete React Events Example

Let’s combine several event concepts into one small application.

import { useState } from "react";

function ContactForm() {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");
  const [submitted, setSubmitted] = useState(false);

  function handleNameChange(event) {
    setName(event.target.value);
  }

  function handleMessageChange(event) {
    setMessage(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();

    setSubmitted(true);

    console.log({
      name,
      message
    });
  }

  function handleKeyDown(event) {
    if (event.key === "Enter" && event.ctrlKey) {
      console.log("Ctrl + Enter pressed");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={handleNameChange}
        onBlur={() => console.log("Name field left")}
        placeholder="Your name"
      />

      <textarea
        value={message}
        onChange={handleMessageChange}
        onKeyDown={handleKeyDown}
        placeholder="Your message"
      />

      <button type="submit">
        Send Message
      </button>

      {submitted && (
        <p>
          Thank you, {name}!
        </p>
      )}
    </form>
  );
}

export default ContactForm;

This example demonstrates:

  • onChange
  • onBlur
  • onKeyDown
  • onSubmit
  • preventDefault()
  • Event objects
  • State updates
  • Conditional rendering

Common React Event Mistakes

Using onclick Instead of onClick

Incorrect:

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

Correct:

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

React event names use camelCase.

Calling the Handler During Rendering

Incorrect:

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

Correct:

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

For arguments:

<button onClick={() => handleClick(10)}>
  Click
</button>

Forgetting the Event Parameter

If you need information about the event, receive the event object:

function handleChange(event) {
  console.log(event.target.value);
}

Forgetting preventDefault()

If you are manually handling a form submission and do not want the browser’s default submission behavior:

function handleSubmit(event) {
  event.preventDefault();
}

Changing State Directly

Avoid directly modifying state.

Incorrect:

items.push(newItem);
setItems(items);

Prefer an immutable update:

setItems((currentItems) => [
  ...currentItems,
  newItem
]);

Confusing target and currentTarget

These can refer to different elements when events propagate through nested elements.

function handleClick(event) {
  console.log(event.target);
  console.log(event.currentTarget);
}

Use the one that matches what your logic actually needs.

Best Practices for React Events

Use Descriptive Handler Names

Prefer:

handleSubmit
handleDelete
handleSearch
handleNameChange

instead of vague names such as:

doIt
function1
test

Keep Event Handlers Focused

An event handler should generally perform the work related to that event.

function handleDelete(id) {
  setProducts((products) =>
    products.filter((product) => product.id !== id)
  );
}

This is easier to understand than putting a large amount of unrelated logic directly inside JSX.

Use Functional State Updates When Appropriate

When the next state depends on the previous state:

setCount((currentCount) => currentCount + 1);

This clearly expresses that the new value is based on the previous value.

Prefer Form-Level Submission Handling

For forms, handle submission with:

<form onSubmit={handleSubmit}>

rather than relying only on a button’s click event.

This also supports users who submit the form using the keyboard.

Consider Keyboard Accessibility

Do not design interactions that only work with a mouse when a standard accessible HTML element can provide the interaction.

For example, prefer:

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

instead of using a generic <div> as a button.

Native HTML elements provide built-in keyboard and accessibility behavior.

Real-World Web4Learners Example

Imagine Web4Learners has a search interface.

A user enters:

React events

The application can respond to several events:

User types
     ↓
onChange
     ↓
Search state updates

User presses Enter
     ↓
onKeyDown
     ↓
Search action runs

User clicks Search
     ↓
onClick
     ↓
Search action runs

Search form submits
     ↓
onSubmit
     ↓
preventDefault()
     ↓
Results displayed

A simple implementation could look like this:

import { useState } from "react";

function SearchBox() {
  const [query, setQuery] = useState("");
  const [searchTerm, setSearchTerm] = useState("");

  function handleChange(event) {
    setQuery(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();

    setSearchTerm(query);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={query}
          onChange={handleChange}
          placeholder="Search Web4Learners"
        />

        <button type="submit">
          Search
        </button>
      </form>

      {searchTerm && (
        <p>
          Showing results for: {searchTerm}
        </p>
      )}
    </div>
  );
}

export default SearchBox;

This small example demonstrates how events, state, forms, and conditional rendering work together.

Image Placement: React Events Flow

Place this image immediately after the section “How React Event Handling Works”.

Create a modern 16:9 educational infographic showing:

User Action → React Event → Event Handler → State Update → UI Update

Include small visual examples such as:

  • Mouse clicking a button
  • User typing into an input
  • Form submission
  • Keyboard key press
  • React component updating

Use a modern Web4Learners visual style with clean typography, subtle gradients, rounded cards, developer-focused UI elements, and a contemporary React-inspired aesthetic. Keep text minimal and highly readable.

Image Placement: Event Propagation

Place this image immediately after the section “Event Propagation”.

Create a clean 16:9 educational diagram showing the three event phases:

Capturing → Target → Bubbling

Show nested elements such as:

Parent
   ↓
Child
   ↓
Button

Then show the reverse direction for bubbling.

Use arrows to clearly indicate event movement. Use a modern developer-education style with rounded cards, subtle gradients, clean typography, and minimal text.

Practice Exercise

Build a React Interactive Profile Card.

Your component should contain:

  • A name input
  • A message textarea
  • A Submit button
  • A profile card
  • A hover interaction
  • A keyboard interaction

Try to use:

onChange
onClick
onSubmit
onMouseEnter
onMouseLeave
onKeyDown
onFocus
onBlur

Also use:

event.preventDefault();

when handling the form submission.

Expected Behavior

When the user types a name, the name should appear in the profile card.

When the user moves the pointer over the card, the card should change its visual state.

When the user leaves the card, it should return to its normal state.

When the user submits the form, prevent the browser’s default form submission and display a message.

When the user presses Enter in the appropriate field, respond to the keyboard event.

React Events Cheat Sheet

ConceptSyntaxPurpose
ClickonClick={handleClick}Respond to clicks
ChangeonChange={handleChange}Respond to input changes
SubmitonSubmit={handleSubmit}Handle form submission
Mouse enteronMouseEnter={handleEnter}Pointer enters element
Mouse leaveonMouseLeave={handleLeave}Pointer leaves element
Key downonKeyDown={handleKeyDown}Key is pressed
Key uponKeyUp={handleKeyUp}Key is released
FocusonFocus={handleFocus}Element receives focus
BluronBlur={handleBlur}Element loses focus
Pointer downonPointerDown={handlePointerDown}Pointer is pressed
Pointer uponPointerUp={handlePointerUp}Pointer is released
Prevent defaultevent.preventDefault()Stops default browser behavior
Stop propagationevent.stopPropagation()Stops event propagation
Event targetevent.targetOriginal event target
Current targetevent.currentTargetElement handling the event
Keyboard keyevent.keyIdentifies pressed key
Event typeevent.typeIdentifies event type
CaptureonClickCaptureHandle during capture phase

Key Takeaways

React events allow applications to respond to user interactions such as clicks, typing, form submissions, mouse movement, keyboard actions, focus changes, and pointer interactions.

The most important concepts to remember are:

  • React event names use camelCase.
  • Event handlers are functions that respond to events.
  • Use onClick for click interactions.
  • Use onChange for controlled form inputs.
  • Use onSubmit to handle forms.
  • Use onKeyDown and onKeyUp for keyboard interactions.
  • Use onFocus and onBlur for focus-related behavior.
  • Pointer events support mouse, touch, and pen interactions.
  • React passes an event object to event handlers.
  • event.target identifies the original event target.
  • event.currentTarget identifies the element whose handler is running.
  • event.preventDefault() prevents a browser’s default action.
  • Events can propagate through nested elements.
  • Event bubbling moves from the target toward its ancestors.
  • Event capturing moves from ancestors toward the target.
  • event.stopPropagation() can stop propagation when necessary.
  • Event handlers can update React state.
  • Event handler functions can also be passed between components through props.
  • Use native HTML elements such as <button> and <form> when possible for better accessibility.

Once you understand React events, you have one of the most important foundations for building interactive React applications. Events connect user actions to application logic, while state determines how the interface responds to those actions.

Leave a Comment