Miso.Html.Event

Custom event handlers

on :: MisoString -> Decoder r -> (r -> action) -> Attribute action

For defining delegated events

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

onWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Attribute action

For defining delegated events with options

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

data Options

Options for handling event propagation.

Constructors

Options

Fields

• preventDefault :: Bool
• stopPropagation :: Bool

Instances

Eq Options

Methods

(==) :: Options -> Options -> Bool

(/=) :: Options -> Options -> Bool

Show Options

Methods

showsPrec :: Int -> Options -> ShowS

show :: Options -> String

showList :: [Options] -> ShowS

Generic Options

Associated Types

type Rep Options :: * -> *

Methods

from :: Options -> Rep Options x

to :: Rep Options x -> Options

type Rep Options

type Rep Options = D1 (MetaData "Options" "Miso.Event.Types" "miso-0.10.0.0-t2wwHFk28o7zYYb4DzinY" False) (C1 (MetaCons "Options" PrefixI True) ((:*:) (S1 (MetaSel (Just Symbol "preventDefault") NoSourceUnpackedness NoSourceStrictness DecidedLazy) (Rec0 Bool)) (S1 (MetaSel (Just Symbol "stopPropagation") NoSourceUnpackedness NoSourceStrictness DecidedLazy) (Rec0 Bool))))

defaultOptions :: Options

Default value for Options.

defaultOptions = Options { preventDefault = False, stopPropagation = False }

Mouse events

onClick :: action -> Attribute action

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

onDoubleClick :: action -> Attribute action

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

onMouseDown :: action -> Attribute action

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

onMouseUp :: action -> Attribute action

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

onMouseEnter :: action -> Attribute action

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

onMouseLeave :: action -> Attribute action

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

onMouseOver :: action -> Attribute action

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

onMouseOut :: action -> Attribute action

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

Keyboard events

onKeyDown :: (KeyCode -> action) -> Attribute action

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

onKeyPress :: (KeyCode -> action) -> Attribute action

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

onKeyUp :: (KeyCode -> action) -> Attribute action

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

Form events

onInput :: (MisoString -> action) -> Attribute action

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

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

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

onSubmit :: action -> Attribute action

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

Focus events

onBlur :: action -> Attribute action

blur event defined with custom options

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

onFocus :: action -> Attribute action

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

Drag events

onDrag :: action -> Attribute action

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

onDragLeave :: action -> Attribute action

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

onDragEnter :: action -> Attribute action

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

onDragEnd :: action -> Attribute action

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

onDragStart :: action -> Attribute action

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

onDragOver :: action -> Attribute action

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

Drop events

onDrop :: AllowDrop -> action -> Attribute action

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