useEventListener
Use EventListener with ease. Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
Usage
ts
import { useEventListener } from 'comuse-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.
vue
<script setup lang="ts">
import { useEventListener } from 'comuse-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>You can also call the returned to unregister the listener.
ts
import { useEventListener } from 'comuse-core'
const cleanup = useEventListener(document, 'keydown', (e) => {
console.log(e.key)
})
cleanup() // This will unregister the listener.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.
ts
import { useEventListener } from 'comuse-core'
// ---cut---
// 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)
})
})