useEventListener

轻松使用 EventListener。在已安装时使用 addEventListener 进行注册，在未安装时自动使用 removeEventListener 进行注册。

¥Use EventListener with ease. Register using addEventListener on mounted, and removeEventListener automatically on unmounted.

用法

¥Usage

import { useEventListener } from '@vueuse/core'

useEventListener(document, 'visibilitychange', (evt) => {
  console.log(evt)
})

你还可以传递一个 ref 作为事件目标，当你更改目标时，useEventListener 将取消注册先前的事件并注册新的事件。

¥You can also pass a ref as the event target, useEventListener will unregister the previous event and register the new one when you change the target.

TypeScript

import { useEventListener } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const element = useTemplateRef<HTMLDivElement>('element')
useEventListener(element, 'keydown', (e) => {
  console.log(e.key)
})

import { useEventListener } from '@vueuse/core'
import { useTemplateRef } from 'vue'
const element = useTemplateRef('element')
useEventListener(element, 'keydown', (e) => {
  console.log(e.key)
})

<template>
  <div v-if="cond" ref="element">
    Div1
  </div>
  <div v-else ref="element">
    Div2
  </div>
</template>

你还可以调用返回来注销监听器。

¥You can also call the returned to unregister the listener.

import { useEventListener } from '@vueuse/core'

const cleanup = useEventListener(document, 'keydown', (e) => {
  console.log(e.key)
})

cleanup() // This will unregister the listener.

请注意，如果你的组件也在 SSR（服务器端渲染）中运行，你可能会收到错误（如 document is not defined），因为 DOM API（如 document 和 window）在 Node.js 中不可用。为了避免这种情况，你可以将逻辑放在 onMounted 钩子中。

¥Note if your components also run in SSR (Server Side Rendering), you might get errors (like document is not defined) because DOM APIs like document and window are not available in Node.js. To avoid that you can put the logic inside onMounted hook.

// onMounted will only be called in the client side, so it guarantees the DOM APIs are available.
onMounted(() => {
  useEventListener(document, 'keydown', (e) => {
    console.log(e.key)
  })
})