---
title: useOn() / useOnDocument() / useOnWindow() | Tutorial
contributors:
  - manucorporat
  - adamdbradley
  - mrhoodz
  - iancharlesdouglas
updated_at: '2023-06-25T19:43:33Z'
created_at: '2022-08-02T12:07:45Z'
---

Use `useOn()` / `useOnDocument()` / `useOnWindow()` to programmatically set up listeners on host elements. This is useful when you are creating custom APIs and don't have access to place these events in the JSX or if the events are not known ahead of time, such as if they are created based on component props.

### Example

The example on the right shows how to use `useOn()` method. Duplicate the code to explore how to use `useOnDocument()` / `useOnWindow()` and how they behave differently.
