# useOn()/ useOnDocument()/ useOnWindow()

> * 如有錯誤處指正或任何建議，懇請留言，感謝!
> * 搭配 ChatGPT 進行翻譯，請小心服用
> * ▸ ... 為英文原文

:::spoiler ...
Use `useOn()` / `useOnDocument()` / `useOnWindow()` to programmatically set up listeners for 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.
:::

###### tags: `Lifecycle Hooks`