index.md

category
Browser

useEventListener

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) })

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.

import { useEventListener } from '@vueuse/core'

const element = ref<HTMLDivElement>()
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.