Search documentation

Search by topic, API name, or import path.

GitHub ↗

function / @typed/template

EventHandler.make

Creates a new EventHandler.

Package version
1.0.0-beta.7
Category
Event handler creation
Since
1.0.0
Member of
EventHandler

Import

import { EventHandler } from "@typed/template";

Access EventHandler.make through the imported EventHandler export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

export declare function make<Ev extends Event, E = never, R = never>(handler: (event: Ev) => void | Effect.Effect<unknown, E, R>, options?: AddEventListenerOptions & EventOptions): EventHandler<Ev, E, R>;

Why

EventHandler.make connects an Event-shaped input to an Effect program. Rendered handlers receive EventSource’s non-pooled Proxy: it forwards properties and binds methods to the native event, but overrides currentTarget with the delegated element and has distinct object identity.

Ownership and lifetime

make only describes the handler. A rendered template installs the listener within its Effect Scope and removes it when that rendered part is finalized. Any Effect returned by the callback keeps its error and required-service channels in the EventHandler<Ev, E, R> type.

Event options

Native AddEventListenerOptions are passed through. Typed’s convenience flags call forwarded native methods before the handler; they do not introduce a separate propagation or default-action system.

Examples

import { Effect } from "effect"
import * as EventHandler from "@typed/template/EventHandler"
import { html } from "@typed/template"

// Simple handler
const clickHandler = EventHandler.make((event) => {
  console.log("Button clicked")
})

// Handler with Effect
const submitHandler = EventHandler.make((event) =>
  Effect.gen(function* () {
    const form = event.target as HTMLFormElement
    const data = new FormData(form)
    yield* Effect.sync(() => console.log("Submitting:", data))
  })
)

// Handler with options
const preventDefaultHandler = EventHandler.make(
  (event) => console.log("Prevented default"),
  { preventDefault: true }
)

const template = html`<button onclick=${clickHandler}>Click</button>`

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source