useEventListener

Tags:

一个轻松使用 EventListener 的 React Hook。

在装载时使用 addEventListener 注册,卸载时自动使用 removeEventListener 移除。

演示

双击窗口上的任何地方,或者在下方虚线框内单击以查看 Toast 提示。

源码

Click inside this dashed box to see the toast

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

API

// 默认的 target 为 `window` useEventListener(eventName, handler, options) // 显式指定 target useEventListener(eventTarget, eventName, handler, options)

元素目标 ElementTarget

目标可以是:

"⚛️" 前缀表示它还可以是包含此目标的 React Ref

  • window(默认)
  • document
  • ⚛️ 原生 EventTarget
  • ⚛️ DOM 元素
  • ⚛️ 实现 EventTarget 接口 (addEventListenerremoveEventListener) 的对象
  • ⚛️ nullundefined

事件名称 EventName

string | string[],一个 stringstring 列表,代表要监听的事件类型。它将会从 EventTarget 类型自动推断出来。

处理函数 Handler

Function | Functions[],一个 functionfunctions 列表,在指定类型的事件发生时接收通知。Event 也会自动推断。

选项 Options

将会传递给 addEventListenerremoveEventListener 的选项。

export type Options = boolean | AddEventListenerOptions | undefined

更多详细选项,请参见 EventTarget.addEventListener#options

返回值

一个 移除 事件监听器的 function