Miso.Html.Event

Custom event handlers

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

Convenience wrapper for onWithOptions defaultOptions.

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

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

onWithOptions opts eventName decoder toAction is an attribute that will set the event handler of the associated DOM node to a function that decodes its argument using decoder, converts it to an action using toAction and then feeds that action back to the update function.

opts can be used to disable further event propagation.

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

Defined in Miso.Event.Types

Methods

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

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

Show Options

Defined in Miso.Event.Types

Methods

showsPrec :: Int -> Options -> ShowS

show :: Options -> String

showList :: [Options] -> ShowS

Generic Options

Defined in Miso.Event.Types

Associated Types

type Rep Options :: Type -> Type

Methods

from :: Options -> Rep Options x

to :: Rep Options x -> Options

ToJSVal Options

Defined in Miso.Event.Types

Methods

toJSVal :: Options -> JSM JSVal

toJSValListOf :: [Options] -> JSM JSVal

type Rep Options

Defined in Miso.Event.Types

type Rep Options = D1 ('MetaData "Options" "Miso.Event.Types" "miso-1.8.2.0-B5Z9gpR3wHYDZYus9qSuzV" 'False) (C1 ('MetaCons "Options" 'PrefixI 'True) (S1 ('MetaSel ('Just "preventDefault") 'NoSourceUnpackedness 'NoSourceStrictness 'DecidedLazy) (Rec0 Bool) :*: S1 ('MetaSel ('Just "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

onKeyDownWithInfo :: (KeyInfo -> 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

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

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

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