ListenerObject

A DOM-style listener object: handleEvent plus the addEventListener options. It is bound natively (never delegated), so once, passive, capture and signal behave as in the DOM.

Import#

import type { ListenerObject } from "@shadow-js/web";

Signature#

interface ListenerObject<T, E = Event> {
  /** Called with each event, batched and untracked. */
  handleEvent(event: E & { currentTarget: T; target: Element }): void;
  /**
   * Removes the listener after its first call.
   * @default false
   */
  once?: boolean;
  /**
   * Promises not to call `preventDefault`, so the browser can scroll without waiting.
   * @default undefined (the browser's default for the event and the target)
   */
  passive?: boolean;
  /**
   * Listens in the capture phase. The `oncapture:` prefix also sets it.
   * @default false
   */
  capture?: boolean;
  /**
   * Removes the listener when the signal aborts. The listener is also removed with its owner.
   * @default undefined (removed only with its owner)
   */
  signal?: AbortSignal;
}

Members#

Name	Type	Description
`T`	`T`
`E`	`E = Event`
`handleEvent`	`handleEvent(event: E & { currentTarget: T; target: Element }): void`	Called with each event, batched and untracked.
`once?`	`once?: boolean`	Removes the listener after its first call.
`passive?`	`passive?: boolean`	Promises not to call `preventDefault`, so the browser can scroll without waiting.
`capture?`	`capture?: boolean`	Listens in the capture phase. The `oncapture:` prefix also sets it.
`signal?`	`signal?: AbortSignal`	Removes the listener when the signal aborts. The listener is also removed with its owner.

Examples#

import type { JSX } from "@shadow-js/web";

const save = () => console.log("saved");
const button: JSX.Element = <button on:click={{ handleEvent: save, once: true }}>Save</button>;