useEventListener

在 mounted 时自动注册事件监听，unmounted 时自动移除，支持响应式目标。

---

函数签名

// 省略 target 时默认监听 window
function useEventListener<E extends keyof WindowEventMap>(
  event: Arrayable<E>,
  listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>,
  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
): Fn

// 指定 target（Window / Document / HTMLElement / EventTarget）
function useEventListener(
  target: MaybeRefOrGetter<EventTarget | null | undefined>,
  event: Arrayable<string>,
  listener: Arrayable<GeneralEventListener>,
  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
): Fn

基础用法

自动卸载

参数

参数	说明	类型	默认值
target	事件目标（ref / getter / Window / Document / HTMLElement）	MaybeRefOrGetter<EventTarget>	window
event	事件名（支持数组绑定多个事件）	Arrayable<string>	—
listener	事件回调（支持数组绑定多个回调）	Arrayable<Function>	—
options	addEventListener 配置项（支持响应式）	MaybeRefOrGetter<boolean | AddEventListenerOptions>	—

返回值

返回清理函数 Fn，调用后立即移除所有已注册的事件监听。

特性

• 组件卸载时自动移除监听
• target 为 ref 时，元素变化会自动重新绑定
• options 支持响应式，变化时自动重新注册
• 省略 target 参数时默认绑定到 window

代码示例

import { ref } from 'vue'
import { useEventListener } from 'ljf-hooks'

const btn = ref<HTMLElement>()

// 绑定到 ref 元素，组件卸载自动移除
const stop = useEventListener(btn, 'click', () => {
  console.log('点击了')
})

// 手动取消
stop()