@tempots/dom/renderable/delegate.d.ts

Fully-typed frontend framework alternative to React and Angular

import { Renderable } from '../types/domain';
import { DOMContext, HandlerOptions } from '../dom/dom-context';
/**
 * Provides type-safe delegated event handlers for all HTML events.
 *
 * The `delegate` object is a proxy that creates event handlers attached to the
 * **container element** rather than individual children. Events are matched
 * against a CSS selector using `Element.closest()`, making this ideal for lists
 * and other containers with many similar children.
 *
 * Unlike `on`, which attaches one listener per element, `delegate` attaches a
 * single listener on the container regardless of how many children match.
 *
 * @example
 * ```typescript
 * // Delegated click on list items — one listener on the <ul>
 * html.ul(
 *   delegate.click('li', (event, ctx) => {
 *     const li = (event.target as Element).closest('li')!
 *     console.log('Clicked:', li.textContent)
 *   }),
 *   ForEach(items, (item) => html.li(item))
 * )
 * ```
 *
 * @example
 * ```typescript
 * // Delegated click on buttons inside a toolbar
 * html.div(
 *   delegate.click('button', (event) => {
 *     const btn = (event.target as Element).closest('button')!
 *     console.log('Button clicked:', btn.dataset.action)
 *   }),
 *   html.button(attr.data('action', 'save'), 'Save'),
 *   html.button(attr.data('action', 'cancel'), 'Cancel')
 * )
 * ```
 *
 * @remarks
 * Delegated events rely on event bubbling. Events that do not bubble (such as
 * `focus`, `blur`, `mouseenter`, `mouseleave`) will not be captured by
 * delegation. Use the regular `on` handler for those events.
 *
 * @public
 */
export declare const delegate: {
    abort: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    afterprint: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    animationcancel: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    animationend: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    animationiteration: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    animationstart: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    auxclick: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    beforeinput: (selector: string, handler: (event: InputEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    beforeprint: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    beforeunload: (selector: string, handler: (event: BeforeUnloadEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    blur: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    cancel: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    canplay: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    canplaythrough: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    change: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    click: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    close: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    compositionend: (selector: string, handler: (event: CompositionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    compositionstart: (selector: string, handler: (event: CompositionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    compositionupdate: (selector: string, handler: (event: CompositionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    contextmenu: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    copy: (selector: string, handler: (event: ClipboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    cuechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    cut: (selector: string, handler: (event: ClipboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dblclick: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    drag: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragend: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragenter: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragexit: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragleave: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragover: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragstart: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    drop: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    durationchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    emptied: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    ended: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    error: (selector: string, handler: (event: ErrorEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    focus: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    focusin: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    focusout: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    formdata: (selector: string, handler: (event: FormDataEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    fullscreenchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    fullscreenerror: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    gotpointercapture: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    hashchange: (selector: string, handler: (event: HashChangeEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    input: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    invalid: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    keydown: (selector: string, handler: (event: KeyboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    keypress: (selector: string, handler: (event: KeyboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    keyup: (selector: string, handler: (event: KeyboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    languagechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    load: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    loadeddata: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    loadedmetadata: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    loadend: (selector: string, handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    loadstart: (selector: string, handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    lostpointercapture: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    message: (selector: string, handler: (event: MessageEvent<any>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    messageerror: (selector: string, handler: (event: MessageEvent<any>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mousedown: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseenter: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseleave: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mousemove: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseout: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseover: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseup: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    offline: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    online: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    orientationchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pagehide: (selector: string, handler: (event: PageTransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pageshow: (selector: string, handler: (event: PageTransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    paste: (selector: string, handler: (event: ClipboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pause: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    play: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    playing: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointercancel: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerdown: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerenter: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerleave: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerlockchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerlockerror: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointermove: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerout: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerover: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerrawupdate: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerup: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    popstate: (selector: string, handler: (event: PopStateEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    progress: (selector: string, handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    ratechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    readystatechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    rejectionhandled: (selector: string, handler: (event: PromiseRejectionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    reset: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    resize: (selector: string, handler: (event: UIEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    scroll: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    scrollend: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    securitypolicyviolation: (selector: string, handler: (event: SecurityPolicyViolationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    seeked: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    seeking: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    select: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    selectionchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    selectstart: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    slotchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    stalled: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    storage: (selector: string, handler: (event: StorageEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    submit: (selector: string, handler: (event: SubmitEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    suspend: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    timeupdate: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    toggle: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    touchcancel: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    touchend: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    touchmove: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    touchstart: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    transitioncancel: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    transitionend: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    transitionrun: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    transitionstart: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    unhandledrejection: (selector: string, handler: (event: PromiseRejectionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    unload: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    visibilitychange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    volumechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    waiting: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    wheel: (selector: string, handler: (event: WheelEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
};