miso
Copyright(C) 2016-2026 David M. Johnson
LicenseBSD3-style (see the file LICENSE)
MaintainerDavid M. Johnson <code@dmj.io>
Stabilityexperimental
Portabilitynon-portable
Safe HaskellNone
LanguageHaskell2010

Miso.Html.Event

Description

Overview

Miso.Html.Event provides pre-wired event-handler Attribute values for the most common browser events. Each handler is built on the lower-level on / onWithOptions primitives from Miso.Event.

This module is re-exported in its entirety by Miso.Html and Miso.

Naming conventions

Handlers follow a consistent naming pattern:

onXxx action
fires action; no event data extracted
onXxxWith (a -> action)
passes extracted event data or DOMRef
onXxxWithOptions opts act
adds Options (preventDefault / stopPropagation) before firing
onXxxCapture action
registers in the capture phase instead of bubble

Quick start

import Miso

view :: Model -> View Model Action
view m =
  div_ []
    [ button_ [ onClick Increment ]        [ text "+" ]
    , input_  [ onInput SetText
                    , value_ m.text ]      []
    , form_   [ onSubmit Submit ]         []  -- preventDefault by default
    ]

Event groups

Notes

  • onSubmit enables preventDefault by default to suppress the native form submission.
  • onEnter is a convenience wrapper around onKeyDown that fires different actions depending on whether keyCode == 13.
  • The WithOptions variants require defaultEvents (or a superset) to include the relevant event name in the component's events map.

See also

Synopsis

Mouse

onClick :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/click

onClickPrevent :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/click

onClickCapture :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/click

onClickWith :: (DOMRef -> action) -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/click Like onClick, but passes the DOM reference along (akin to getElementById).

onClickWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch on click

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/click

onDoubleClick :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/dblclick

onDoubleClickWith :: (DOMRef -> action) -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/dblclick

onDoubleClickWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch on double-click

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/dblclick

onMouseDown :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/mousedown

onMouseUp :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/mouseup

onMouseEnter :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter

onMouseLeave :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave

onMouseOver :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

onMouseOut :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/mouseout

onContextMenuWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch when the context menu event fires

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu

This can be used to disable right-click context menu from appearing

div_ [ onContextMenuWithOptions NoOp defaultOptions { preventDefault = False } ] [ ]

Since: 1.9.0.0

Keyboard

onKeyDown Source #

Arguments

:: (KeyCode -> action)

Callback receiving the numeric key code of the pressed key

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/keydown

onKeyDownWithInfo Source #

Arguments

:: (KeyInfo -> action)

Callback receiving the key code and modifier key state

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/keydown

onKeyPress Source #

Arguments

:: (KeyCode -> action)

Callback receiving the numeric key code of the pressed key

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/keypress

onKeyUp Source #

Arguments

:: (KeyCode -> action)

Callback receiving the numeric key code of the released key

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/keyup

onEnter Source #

Arguments

:: action

The action to call when the keydown *is not* 13 (typically NoOp or Id)

-> action

The action to call when keydown *is* 13.

-> Attribute action 

onEnter

A convenience function for processing the Enter key.

data Action = NoOp | OnEnter

type Model = Int

view :: Model -> View model Action
view entryId = input_ [ onEnter NoOp OnEnter ]

Since: 1.9.0.0

Form

onInput Source #

Arguments

:: (MisoString -> action)

Callback receiving event.target.value

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/input

onInputWith Source #

Arguments

:: (MisoString -> DOMRef -> action)

Callback receiving event.target.value and the element's DOMRef

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/input

onChange Source #

Arguments

:: (MisoString -> action)

Callback receiving event.target.value

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/change

onChangeWith Source #

Arguments

:: (MisoString -> DOMRef -> action)

Callback receiving event.target.value and the element's DOMRef

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/change

onChecked :: (Checked -> action) -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/change

onSubmit :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/submit

Note: This has preventDefault enabled by default.

Focus

onBlur :: action -> Attribute action Source #

blur event defined with custom options

https://developer.mozilla.org/en-US/docs/Web/Events/blur

onFocus :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/focus

Drag

onDrag :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/drag

onDragWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch while the element is being dragged

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/drag

onDragLeave :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/dragleave

onDragLeaveWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch when a dragged element leaves this target

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/dragleave

onDragEnter :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/dragenter

onDragEnterWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch when a dragged element enters this target

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/dragenter

onDragEnd :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/dragend

onDragEndWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch when the drag operation ends

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/dragend

onDragStart :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

onDragStartWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch when the drag starts

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

onDragOver :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

onDragOverWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch while the dragged element is over this target

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

Drop

onDrop Source #

Arguments

:: Options

Propagation options — typically include preventDefault to allow the drop

-> action

Action to dispatch when a dragged element is dropped on this target

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/drop

onDropWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch on drop

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/drop

Select

onSelect Source #

Arguments

:: (MisoString -> action)

Callback receiving event.target.value of the selected text

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/select

Pointer

onPointerDown Source #

Arguments

:: (PointerEvent -> action)

Callback receiving the full PointerEvent

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/pointerdown

onPointerUp Source #

Arguments

:: (PointerEvent -> action)

Callback receiving the full PointerEvent

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/pointerup

onPointerEnter Source #

Arguments

:: (PointerEvent -> action)

Callback receiving the full PointerEvent

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/pointerenter

onPointerLeave Source #

Arguments

:: (PointerEvent -> action)

Callback receiving the full PointerEvent

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/pointerleave

onPointerOver Source #

Arguments

:: (PointerEvent -> action)

Callback receiving the full PointerEvent

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/pointerover

onPointerOut Source #

Arguments

:: (PointerEvent -> action)

Callback receiving the full PointerEvent

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/pointerout

onPointerCancel Source #

Arguments

:: (PointerEvent -> action)

Callback receiving the full PointerEvent

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/pointercancel

onPointerMove Source #

Arguments

:: (PointerEvent -> action)

Callback receiving the full PointerEvent

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/pointermove

Media

onAbort :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_abort.asp

onAbortWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_abort.asp

onCanPlay :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_canplay.asp

onCanPlayWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_canplay.asp

onCanPlayThrough :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_canplaythrough.asp

onCanPlayThroughWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_canplaythrough.asp

onDurationChange :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_durationchange.asp

onDurationChangeWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_durationchange.asp

onEmptied :: action -> Attribute action Source #

https://www.w3schools.com/jsref/event_onemptied.asp

onEmptiedWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/jsref/event_onemptied.asp

onEnded :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_ended.asp

onEndedWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_ended.asp

onError :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_error.asp

onErrorWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_error.asp

onLoad :: action -> Attribute action Source #

https://www.w3schools.com/jsref/event_onload.asp

onUnload :: action -> Attribute action Source #

onUnload event

onLoadedData :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_loadeddata.asp

onLoadedDataWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_loadeddata.asp

onLoadedMetadata :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_loadedmetadata.asp

onLoadedMetadataWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_loadedmetadata.asp

onLoadStart :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_loadstart.asp

onLoadStartWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_loadstart.asp

onPause :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_pause.asp

onPauseWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_pause.asp

onPlay :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_play.asp

onPlayWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_play.asp

onPlaying :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_playing.asp

onPlayingWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_playing.asp

onProgress :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_progress.asp

onProgressWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_progress.asp

onRateChange :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_ratechange.asp

onRateChangeWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_ratechange.asp

onSeeked :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_seeked.asp

onSeekedWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_seeked.asp

onSeeking :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_seeking.asp

onSeekingWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_seeking.asp

onStalled :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_stalled.asp

onStalledWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_stalled.asp

onSuspend :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_suspend.asp

onSuspendWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_suspend.asp

onTimeUpdate :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_timeupdate.asp

onTimeUpdateWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_timeupdate.asp

onVolumeChange :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_volumechange.asp

onVolumeChangeWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_volumechange.asp

onWaiting :: action -> Attribute action Source #

https://www.w3schools.com/tags/av_event_waiting.asp

onWaitingWith :: (Media -> action) -> Attribute action Source #

https://www.w3schools.com/tags/av_event_waiting.asp

Touch

onTouchStart :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/touchstart

onTouchStartWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch on touch start

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/touchstart

onTouchEnd :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/touchend

onTouchEndWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch on touch end

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/touchend

onTouchMove :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/touchmove

onTouchMoveWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch while a touch point is moving

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/touchmove

onTouchCancel :: action -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/Events/touchcancel

onTouchCancelWithOptions Source #

Arguments

:: Options

Propagation options (preventDefault, stopPropagation)

-> action

Action to dispatch when a touch point is cancelled

-> Attribute action 

https://developer.mozilla.org/en-US/docs/Web/Events/touchcancel