useEventListener

Registers one or more DOM event listeners against a reactive target. When the target changes, the old listeners are removed and the same events are attached to the new target.

The composable returns a dispose function and also registers that cleanup with the current Vue effect scope when one exists. In non-browser environments it returns a no-op dispose function.

Importing

import { useEventListener } from '@almighty-shogun/common';

Usage

import { ref } from 'vue';
import { useEventListener } from '@almighty-shogun/common';

const button = ref<HTMLButtonElement | null>(null);

const dispose = useEventListener(button, 'click', event => {
    event.preventDefault();
});

dispose();

Parameters

source: MaybeRefOrGetter<NullableOrUndefinable<ComponentTarget>>
Element, window, document, Vue component instance, ref, or getter to attach listeners to.

events: Arrayable<TEvent>
Event name or names to register on the resolved target.

handler: (evt: EventMap[TEvent]) => void
Listener called for matching events.

options?: Undefinable<AddEventListenerOptions | boolean>
Native listener options passed to addEventListener and removeEventListener.

Returns

A dispose function that removes all registered listeners and stops target watching.

Uses

Type signature

declare function useEventListener<TEvent extends keyof EventMap>(
    source: MaybeRefOrGetter<NullableOrUndefinable<ComponentTarget>>,
    events: Arrayable<TEvent>,
    handler: (evt: EventMap[TEvent]) => void,
    options?: Undefinable<AddEventListenerOptions | boolean>
): UseEventListener;

type UseEventListener = () => void;
type ComponentTarget = HTMLTarget | ComponentPublicInstance;
type EventMap = HTMLElementEventMap & WindowEventMap & DocumentEventMap;

useEventListener ​

Importing ​

Usage ​