useEventListener

簡単にEventListenerを使用します。マウント時にaddEventListenerを使用して登録し、アンマウント時にremoveEventListenerを自動的に行います。

使用法

import { useEventListener } from '@vueuse/core'

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

イベントターゲットとしてrefを渡すこともできます。ターゲットを変更すると、useEventListenerは前のイベントを登録解除し、新しいものを登録します。

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

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

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

リスナーを登録解除するために、返されたものを呼び出すこともできます。

import { useEventListener } from '@vueuse/core'

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

cleanup() // これによりリスナーが登録解除されます。

コンポーネントがSSR（サーバーサイドレンダリング）でも実行される場合、document is not definedのようなエラーが発生することがあります。これは、documentやwindowのようなDOM APIがNode.jsでは利用できないためです。それを避けるために、ロジックをonMountedフック内に置くことができます。

import { useEventListener } from '@vueuse/core'
// ---cut---
// onMountedはクライアントサイドでのみ呼び出されるため
// DOM APIが利用可能であることを保証します。
onMounted(() => {
  useEventListener(document, 'keydown', (e) => {
    console.log(e.key)
  })
})