Import
import { make } from "@typed/template/EventHandler";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.