Attach a bubble-phase event handler to a VDOM node. Convenience wrapper for onWithOptions BUBBLE defaultOptions.

The decoded event payload is converted to an action by toAction and dispatched into the component's update function.

let clickHandler = on "click" emptyDecoder $ \() _ -> MyAction
in button_ [ clickHandler, class_ "add" ] [ text_ "+" ]

Like on but meant to used with the Miso.Native namespace.

view_ [ event $ static (onMain "tap" emptyDecoder ) ] [ text_ "+" ]

Attach a capture-phase event handler to a VDOM node. Convenience wrapper for onWithOptions CAPTURE defaultOptions.

Events in the capture phase propagate from the document root down to the target element, before any bubble-phase handlers run.

let captureClick = onCapture "click" emptyDecoder $ \() _ -> MyAction
in button_ [ captureClick ] [ text_ "capture me" ]

Attach an event handler with explicit phase and propagation options.

• phase — BUBBLE (default) or CAPTURE: which DOM propagation phase the listener is registered on.
• options — defaultOptions or a custom Options value: controls preventDefault and stopPropagation behaviour.
• eventName — the DOM event name, e.g. "click", "keydown".
• decoder — a Decoder that extracts relevant fields from the JS event object.
• toAction — maps the decoded payload and the element's DOMRef to an action.

let clickHandler = onWithOptions BUBBLE defaultOptions "click" emptyDecoder $ \() _ -> Action
in button_ [ clickHandler, class_ "add" ] [ text_ "+" ]

Mark an event handler to be dispatched on the Lynx main thread (MTS) rather than the background thread. This is the analog of Lynx's main-thread:bind prefix, and is decided per handler — so tap can be a main-thread handler on one element and a background handler on another.

A main-thread handler runs imperatively on the MTS (no VDOM diff, no repaint); pair it with a *With combinator to receive the target DOMRef and mutate it via Miso.Native.MainThread. No-op on the browser/WASM runtime.

view_ [ event (static (mainThread (onTapWith Grow))) ] children

Since: 1.9.0.0

Phase during which event listener is invoked.

Since: 1.9.0.0

Fire an action immediately after the DOM element is inserted into the document.

Use this to trigger imperative setup (focus, measurements, third-party widget initialisation) that requires the element to be live in the page.

Since: 1.9.0.0

Like onCreated but also receives the element's DOMRef.

Useful when you need to store or forward the raw DOM node to a JS library.

Since: 1.9.0.0

Fire an action just before the DOM element is inserted into the document.

The element has been constructed but is not yet attached to the live DOM when this fires.

Since: 1.9.0.0

Fire an action immediately after the DOM element is removed from the document.

The element has already been detached from the DOM when this fires.

Since: 1.9.0.0

Fire an action just before the DOM element is removed from the document.

The element is still present in the DOM when this fires, making it suitable for teardown logic (cancel animations, disconnect observers, etc.).

Since: 1.9.0.0

Like onBeforeDestroyed but also receives the element's DOMRef.

Since: 1.9.0.0