Function useEventListener

useEventListener<T extends keyof WindowEventMap>(
    target: Window,
    event: MaybeArray<T>,
    listener: MaybeArray<UseWindowEventListener<T>>,
    options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
): () => void

useEventListener(window, 'resize', (event) => {
    console.log('Window resized', event)
  })
Copy

useEventListener<T extends keyof DocumentEventMap>(
    target: Document,
    event: MaybeArray<T>,
    listener: MaybeArray<UseDocumentEventListener<T>>,
    options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
): () => void

useEventListener(document, 'scroll', (event) => {
    console.log('Document scrolled', event)
  })
Copy

useEventListener<
    T extends
        | "error"
        | "abort"
        | "animationcancel"
        | "animationend"
        | "animationiteration"
        | "animationstart"
        | "auxclick"
        | "beforeinput"
        | "beforematch"
        | "beforetoggle"
        | "blur"
        | "cancel"
        | "canplay"
        | "canplaythrough"
        | "change"
        | "click"
        | "close"
        | "compositionend"
        | "compositionstart"
        | "compositionupdate"
        | "contextlost"
        | "contextmenu"
        | "contextrestored"
        | "copy"
        | "cuechange"
        | "cut"
        | "dblclick"
        | "drag"
        | "dragend"
        | "dragenter"
        | "dragleave"
        | "dragover"
        | "dragstart"
        | "drop"
        | "durationchange"
        | "emptied"
        | "ended"
        | "focus"
        | "focusin"
        | "focusout"
        | "formdata"
        | "gotpointercapture"
        | "input"
        | "invalid"
        | "keydown"
        | "keypress"
        | "keyup"
        | "load"
        | "loadeddata"
        | "loadedmetadata"
        | "loadstart"
        | "lostpointercapture"
        | "mousedown"
        | "mouseenter"
        | "mouseleave"
        | "mousemove"
        | "mouseout"
        | "mouseover"
        | "mouseup"
        | "paste"
        | "pause"
        | "play"
        | "playing"
        | "pointercancel"
        | "pointerdown"
        | "pointerenter"
        | "pointerleave"
        | "pointermove"
        | "pointerout"
        | "pointerover"
        | "pointerrawupdate"
        | "pointerup"
        | "progress"
        | "ratechange"
        | "reset"
        | "resize"
        | "scroll"
        | "scrollend"
        | "securitypolicyviolation"
        | "seeked"
        | "seeking"
        | "select"
        | "selectionchange"
        | "selectstart"
        | "slotchange"
        | "stalled"
        | "submit"
        | "suspend"
        | "timeupdate"
        | "toggle"
        | "touchcancel"
        | "touchend"
        | "touchmove"
        | "touchstart"
        | "transitioncancel"
        | "transitionend"
        | "transitionrun"
        | "transitionstart"
        | "volumechange"
        | "waiting"
        | "webkitanimationend"
        | "webkitanimationiteration"
        | "webkitanimationstart"
        | "webkittransitionend"
        | "wheel"
        | "fullscreenchange"
        | "fullscreenerror",
>(
    target: MaybeRefOrGetter<Nullable<ComponentPublicInstance>>,
    event: MaybeArray<T>,
    listener: MaybeArray<UseComponentPublicInstanceEventListener<T>>,
    options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
): () => void

const component = useTemplateRef<ComponentPublicInstance>('component')

  useEventListener(component, 'click', (event) => {
    console.log('ComponentPublicInstance clicked', event)
  })
Copy

useEventListener<T extends keyof HTMLElementEventMap>(
    target: MaybeRefOrGetter<Nullable<HTMLElement>>,
    event: MaybeArray<T>,
    listener: MaybeArray<UseHTMLElementEventListener<T>>,
    options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
): () => void

const element = useTemplateRef<HTMLElement>('element')

  useEventListener(element, 'click', (event) => {
    console.log('HTMLElement clicked', event)
  })
Copy

useEventListener<T extends keyof SVGElementEventMap>(
    target: MaybeRefOrGetter<Nullable<SVGElement>>,
    event: MaybeArray<T>,
    listener: MaybeArray<UseSVGElementEventListener<T>>,
    options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
): () => void

const element = useTemplateRef<SVGElement>('element')

  useEventListener(element, 'click', (event) => {
    console.log('SVGElement clicked', event)
  })
Copy

useEventListener<T extends Event>(
    target: MaybeRefOrGetter<Nullable<EventTarget>>,
    event: MaybeArray<string>,
    listener: MaybeArray<UseEventListener<T>>,
    options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
): () => void

const target = ref<EventTarget | null>(null)

  useEventListener(target, 'custom-event', (event) => {
    console.log('Custom event triggered', event)
  })
Copy