# Event Handling
Course: [React](https://www.devtutorials.ai/learn/react) · Section: Dynamic User Interfaces
Source: https://www.devtutorials.ai/learn/react/dynamic-ui/event-handling
> Events and event handlers, synthetic events and the event object, click, mouse and keyboard events, passing values to handlers, typing handlers, preventDefault and event propagation.
## Introduction to Events
An **event** is something that happens on the page, such as a click, a key press or a mouse move. **Event handling** means running your own code when an event happens.
In React, you add an event to an element with a prop like `onClick`. You give it a function. React calls that function when the event happens. This function is called an **event handler**.
An event happens, React calls your handler, and the handler updates the page.
### Real-World Example
In a bookshop app, each book card has an **Add to cart** button with `onClick={() => addToCart(book.id)}`. A search box has `onChange` and reads `e.target.value` on every key press.
React calls these functions only when the user clicks or types. Each function updates state, and the page shows the new cart count and the new search results.
```tsx
```
Here, `onClick` is the event, and `handleClick` is the event handler.
Event names in React use camelCase: `onClick`, `onChange`, `onKeyDown`. You pass a function, not a string.
## Synthetic Events and Event Object
When an event happens, React calls your handler and gives it one input. This input is called the **event object**. It holds information about what happened.
Most people name it `e` or `event`:
```tsx
function handleClick(e) {
console.log(e.type); // "click"
}
```
React's event object is called a **synthetic event**. It is React's own version of the browser's event. It works the same way in every browser, so you do not have to worry about browser differences.
React gives your handler the same event object in every browser.
Useful parts of the event object:
- **`e.type`** — the kind of event, such as `"click"` or `"keydown"`.
- **`e.target`** — the element where the event started.
- **`e.currentTarget`** — the element that has the handler.
- **`e.preventDefault()`** — stops the browser's normal action.
- **`e.stopPropagation()`** — stops the event from going up to parent elements.
Click the button and look at the console. The event object tells you the event type, which button was clicked, and where the mouse was.
`e: any` means "any type". Later in this lesson, you will learn the correct type to use.
## Click Events
`onClick` runs a function when an element is clicked. You can write the handler in two ways.
Atomic Habits
Likes: {likes}
{" "}
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
- **Way 1:** `onClick={handleLike}` gives React the function `handleLike`. Use this when the handler has more than one line.
- **Way 2:** `onClick={() => setLikes(0)}` writes a short function right there. Use this for one short line.
Do not write `onClick={handleLike()}`. The `()` runs the function at once, while the page is drawn, not when you click.
## Mouse Events
Mouse events run when the mouse moves over an element or clicks it. These are the most common ones:
| Event | When it runs |
|---|---|
| `onClick` | The element is clicked |
| `onDoubleClick` | The element is clicked twice quickly |
| `onMouseEnter` | The mouse moves onto the element |
| `onMouseLeave` | The mouse moves off the element |
| `onMouseMove` | The mouse moves while over the element |
setMessage("Mouse is on the box")}
onMouseLeave={() => setMessage("Mouse left the box")}
onDoubleClick={() => setMessage("You double-clicked!")}
onMouseMove={(e) => setPosition({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY })}
>
Wings of Fire
{message}
Mouse inside the box: x = {position.x}, y = {position.y}
);
}
`,
"App.css": `.cover {
width: 200px;
height: 90px;
display: grid;
place-items: center;
background: #eff6ff;
border: 2px solid #0047ba;
border-radius: 8px;
font-weight: 600;
user-select: none;
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Move the mouse onto the box, move it around, double-click it, then move it away. Each action runs a different handler.
## Keyboard Events
Keyboard events run when a key is pressed in an element that has focus, such as an input box.
- **`onKeyDown`** runs when a key is pressed down.
- **`onKeyUp`** runs when the key is let go.
The event object has **`e.key`**. It holds the name of the key, such as `"a"`, `"Enter"` or `"Escape"`.
setText(e.target.value)}
onKeyDown={handleKeyDown}
/>
Last key: {lastKey}
{books.map((book, i) =>
{book}
)}
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Click in the box and type. Look at this line in `handleKeyDown`:
```tsx
if (e.key === "Enter" && text !== "") {
```
It means: if the key is Enter, and the box is not empty, add the book. Press **Escape** to clear the box.
## Passing Parameters to Event Handlers
Sometimes the handler needs extra information, such as which book was clicked. Wrap the call in an arrow function, and pass the value inside it.
```tsx
```
The arrow function runs only on click. Then it calls `addToCart` with the book name.
{" "}
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Both buttons use the same `addToCart` function. Each button sends its own book name.
You can also pass the event object along with your own value:
```tsx
```
## Typing Event Handlers
In TypeScript, you can give the event object a proper type instead of `any`. Then TypeScript knows what is inside it, and your editor can suggest its parts.
React gives a type for each kind of event. You import them from `"react"`:
| Type | Use it for | Example element |
|---|---|---|
| `MouseEvent` | Clicks and mouse events | `
The part in `< >` is the kind of element. For example, `HTMLButtonElement` means a `