Skip to main content

createEventListener

Attach typed DOM event listeners that clean up automatically when the Solid owner scope disposes.

View as Markdown

createEventListener and createEventListenerMap attach DOM event listeners to Window, Document, or HTML elements. They automatically register onCleanup() in the active SolidJS reactive scope to prevent memory leaks.

Import#

import { createEventListener, createEventListenerMap } from 'moraine/utils'

Signatures#

function createEventListener<
  TTarget extends EventTarget,
  TType extends EventTypeForTarget<TTarget>,
>(
  target: TTarget | null | undefined,
  type: TType,
  listener: (event: EventMapForTarget<TTarget>[TType]) => void,
  options?: boolean | AddEventListenerOptions,
): void

function createEventListenerMap<TTarget extends EventTarget>(
  target: TTarget | null | undefined,
  listeners: EventListenerMap<TTarget>,
  options?: boolean | AddEventListenerOptions,
): void

Usage Example#

Single Event with `createEventListener`#

src/EscapeListener.tsx

import { onMount } from 'solid-js'
import { createEventListener } from 'moraine/utils'

export function EscapeListener(props: { onEscape: () => void }) {
  onMount(() => {
    // Strongly typed: e is KeyboardEvent for window keydown.
    createEventListener(window, 'keydown', (e) => {
      if (e.key === 'Escape') {
        props.onEscape()
      }
    })
  })

  return null
}

Multiple Events with `createEventListenerMap`#

src/DragObserver.tsx

import { onMount } from 'solid-js'
import { createEventListenerMap } from 'moraine/utils'

export function DragObserver() {
  onMount(() => {
    createEventListenerMap(window, {
      pointermove: (e) => console.log('Pointer at:', e.clientX, e.clientY),
      pointerup: () => console.log('Drag ended'),
      pointercancel: () => console.log('Drag cancelled'),
    })
  })

  return null
}

Features#

Type Inferred: Event types automatically narrow according to the target (e.g. window.resize gives UIEvent, document.keydown gives KeyboardEvent).
Owner Scope Bound: Cleanups are registered with onCleanup in the active Solid owner, including when called from onMount.
Safe Null Handling: Passes null or undefined targets safely without runtime exceptions.