VueUse useEventListener 事件监听

VueUse useEventListener 事件监听,在mounted事件注册事件监听在unmounted注销监听。

代码示例

import { useEventListener } from '@vueuse/core'
//监听整个网页
useEventListener(document, 'visibilitychange', (evt) => {
  console.log(evt)
})

你也可以传入ref(Dom元素)作为事件目标，当你改变目标时，useEventListener将注销之前的事件并注册新的事件。

<script setup lang="ts">
import { useEventListener } from '@vueuse/core'

const element = ref<HTMLDivElement>()
useEventListener(element, 'keydown', (e) => {
  console.log(e.key)
})
</script>
<template>
<div ref="element" >
      把鼠标移动到这里试试看
  </div>
</template>

在线例子

例子

你也可以卸载已监听的事件。

import { useEventListener } from '@vueuse/core'

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

//卸载监听
cleanup()

在SSR 模式下(服务端渲染)，需要在onMounted里注册监听

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