Overview

Miso.Event.Types defines the payload types for browser DOM events and the Events map that controls which events are delegated to the miso runtime and at which Phase of the event lifecycle.

Event delegation

Miso uses event delegation: a single listener is attached at the root of the component's DOM subtree and catches all matching events as they bubble or capture past it. The Events map (Map MisoString Phase) declares which event names participate and their phase.

The default set (defaultEvents) covers the most common interactions. Additional event groups can be merged in when constructing a component:

myComponent = (component model update view)
  { events = defaultEvents
      <> keyboardEvents
      <> pointerEvents
  }

Event groups

defaultEvents

blur, change, click, contextmenu, dblclick, focus, input, select, submit

keyboardEvents

keydown, keypress, keyup

mouseEvents

mouseup, mousedown, mouseenter, mouseleave, mouseover, mouseout, contextmenu

dragEvents

drag, dragstart, dragend, dragenter, dragleave, dragover, drop

pointerEvents

pointerup, pointerdown, pointerenter, pointerleave, pointerover, pointerout, pointercancel, contextmenu

mediaEvents

play, pause, ended, timeupdate, volumechange, …

clipboardEvents

cut, copy, paste

touchEvents

touchstart, touchend, touchmove, touchcancel

Payload types

• KeyCode / KeyInfo — keyboard event key code and modifier state.
• Checked — checkbox checked boolean.
• PointerEvent / PointerType — pointer position, pressure, tilt, and device type.
• Options — per-handler flags: preventDefault, stopPropagation.

See also

• Miso.Event.Decoder — Decoder and pre-built decoders for these types
• Miso.Html.Event — onClick, onInput, onKeyDown, … combinators