Suggest an edit

Improve this article

Refine the answer for “How do you type event handlers?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## The basic principle

- All events are descendants of `React.SyntheticEvent`.
- Handlers are tied to an **element**: `HTMLInputElement`, `HTMLButtonElement`, `HTMLFormElement`, `HTMLDivElement`, and so on.
- Convenient callback aliases: `React.MouseEventHandler<T>`, `React.ChangeEventHandler<T>`, and others.

```javascript
// The general form
const handle = (e: React.SyntheticEvent<HTMLDivElement>) => { /* ... */ };

// With the alias (recommended, shorter)
const onClick: React.MouseEventHandler<HTMLButtonElement> = (e) => { /* ... */ };
```

---

## Common cases

#### Click (mouse)

```javascript
const onClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
  e.preventDefault();
};
```

#### Change (input, select, textarea)

```javascript
const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  const value = e.currentTarget.value; // correctly typed
};
```

#### Submit (form)

```javascript
const onSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
  e.preventDefault();
};
```

#### Keyboard

```javascript
const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
  if (e.key === "Enter") { /* ... */ }
};
```

#### Focus / Blur

```javascript
const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => { /* ... */ };
const onBlur:  React.FocusEventHandler<HTMLTextAreaElement> = (e) => { /* ... */ };
```

#### Pointer / Mouse / Wheel

```javascript
const onPointerDown: React.PointerEventHandler<HTMLDivElement> = (e) => {};
const onMouseEnter:  React.MouseEventHandler<HTMLDivElement>   = (e) => {};
const onWheel:       React.WheelEventHandler<HTMLDivElement>   = (e) => {};
```

#### Drag & Drop

```javascript
const onDragStart: React.DragEventHandler<HTMLDivElement> = (e) => {};
const onDrop:      React.DragEventHandler<HTMLDivElement> = (e) => {
  e.preventDefault();
};
```

#### Clipboard

```javascript
const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (e) => {
  const text = e.clipboardData.getData("text");
};
```

#### Touch (mobile)

```javascript
const onTouchStart: React.TouchEventHandler<HTMLDivElement> = (e) => {};
```

#### Animation / Transition

```javascript
const onAnimationEnd: React.AnimationEventHandler<HTMLDivElement> = (e) => {};
const onTransitionEnd: React.TransitionEventHandler<HTMLDivElement> = (e) => {};
```

---

## Useful techniques

#### 1) `target` vs `currentTarget`

- **Use** `e.currentTarget` - it is always typed as the element the handler is attached to.
- `e.target` can be a nested node and is typed more broadly (`EventTarget`).

```javascript
const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  // correct
  e.currentTarget.value;
  // e.target.value - will not compile without a type cast
};
```

#### 2) Inlining it directly in a component's props

```javascript
<button onClick={(e: React.MouseEvent<HTMLButtonElement>) => { /* ... */ }} />
```

#### 3) The type of a handler prop in your own components

```javascript
type Props = {
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
};
const MyButton = ({ onClick }: Props) => <button onClick={onClick}>OK</button>;
```

Or "borrow" the signature from the native element:

```javascript
type ButtonProps = {
  onClick?: React.ComponentProps<"button">["onClick"];
};
```

#### 4) A handler that reads the whole form

```javascript
const onSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
  e.preventDefault();
  const form = e.currentTarget;
  const data = new FormData(form);
  const email = data.get("email");
};
```

#### 5) A generic callback with a type parameter

```javascript
function handleChange<T extends HTMLInputElement | HTMLTextAreaElement>(
  e: React.ChangeEvent<T>
) {
  console.log(e.currentTarget.value);
}
```

---

## Quick type reference

- `React.MouseEvent<T>` / `React.MouseEventHandler<T>`
- `React.ChangeEvent<T>` / `React.ChangeEventHandler<T>`
- `React.FormEvent<T>` / `React.FormEventHandler<T>`
- `React.KeyboardEvent<T>` / `React.KeyboardEventHandler<T>`
- `React.FocusEvent<T>` / `React.FocusEventHandler<T>`
- `React.PointerEvent<T>` / `React.PointerEventHandler<T>`
- `React.DragEvent<T>` / `React.DragEventHandler<T>`
- `React.ClipboardEvent<T>` / `React.ClipboardEventHandler<T>`
- `React.WheelEvent<T>` / `React.WheelEventHandler<T>`
- `React.TouchEvent<T>` / `React.TouchEventHandler<T>`
- `React.AnimationEvent<T>` / `React.AnimationEventHandler<T>`
- `React.TransitionEvent<T>` / `React.TransitionEventHandler<T>`

Where `T` is the specific DOM element:
`HTMLInputElement`, `HTMLButtonElement`, `HTMLDivElement`, `HTMLFormElement`, `HTMLSelectElement`, `HTMLTextAreaElement`, `HTMLAnchorElement`, and so on.

---

## Typical mistakes

- Using `any` in handlers - you lose hints and type checks.
- Using `e.target` instead of `e.currentTarget`.
- Forgetting to specify the element type (for example, `HTMLInputElement`) - you will have to manually cast `target`'s type.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts566 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.