Elmish.HTML.Events

type EventHandler a = EffectFn1 a Unit

Type of every onXyz property on every HTML tag in this library. This is the standard shape of all event handlers on React's built-in components (aka tags).

newtype InputChangeEvent

Event object specifically for the onChange event of the <input> tag. While it doesn't have any special properties relative to SyntheticEvent, it's modeled as a separate type so as to support the custom accessors inputText and inputChecked, thus reducing the friction in the most frequent use case of:

input { type: "text", onChange: dispatch <| MyInputChanged <<< E.inputText }

input { type: "checkbox", onChange: dispatch <| MyCheckboxChanged <<< E.inputChecked }

Constructors

• InputChangeEvent RSyntheticEvent

Instances

• CanReceiveFromJavaScript InputChangeEvent
• IsSyntheticEvent InputChangeEvent

newtype KeyboardEvent

Event object for keyboard-related events such as onKeyDown or onKeyPress. This type follows React docs at https://reactjs.org/docs/events.html#keyboard-events

Constructors

• KeyboardEvent RKeyboardEvent

Instances

• CanReceiveFromJavaScript KeyboardEvent
• IsSyntheticEvent KeyboardEvent
• IsKeyboardOrMouseEvent KeyboardEvent

newtype MouseEvent

Event object for mouse-related events such as onMouseDown or onMouseMove. This type follows React docs at https://reactjs.org/docs/events.html#mouse-events

Constructors

• MouseEvent RMouseEvent

Instances

• CanReceiveFromJavaScript MouseEvent
• IsSyntheticEvent MouseEvent
• IsKeyboardOrMouseEvent MouseEvent

newtype SelectChangeEvent

Event object specifically for the onChange event of the <select> tag. While it doesn't have any special properties relative to SyntheticEvent, it's modeled as a separate type so as to support the custom accessor selectSelectedValue, thus reducing the friction in the most frequent use case of:

select { onChange: dispatch <| MyInputChanged <<< E.selectSelectedValue }

Constructors

• SelectChangeEvent RSyntheticEvent

Instances

• CanReceiveFromJavaScript SelectChangeEvent
• IsSyntheticEvent SelectChangeEvent

newtype SyntheticEvent

The most generic event object from React, for events that don't have any special properties. This type follows React docs at https://reactjs.org/docs/events.html

Constructors

• SyntheticEvent RSyntheticEvent

Instances

• CanReceiveFromJavaScript SyntheticEvent
• IsSyntheticEvent SyntheticEvent

newtype TextAreaChangeEvent

Event object specifically for the onChange event of the <textarea> tag. While it doesn't have any special properties relative to SyntheticEvent, it's modeled as a separate type so as to support the custom accessor textareaText, thus reducing the friction in the most frequent use case of:

textarea { onChange: dispatch <| MyTextareaChanged <<< E.textareaText }

Constructors

• TextAreaChangeEvent RSyntheticEvent

Instances

• CanReceiveFromJavaScript TextAreaChangeEvent
• IsSyntheticEvent TextAreaChangeEvent

newtype TouchEvent

Event object for touch-related events such as onTouchStart or onTouchMove. This type follows React docs at https://reactjs.org/docs/events.html#touch-events

Constructors

• TouchEvent RTouchEvent

Instances

• CanReceiveFromJavaScript TouchEvent
• IsSyntheticEvent TouchEvent
• IsKeyboardOrMouseEvent TouchEvent

inputChecked :: InputChangeEvent -> Boolean

Convenience accessor for extracting the checked state of an <input type=checkbox> tag in its onChange handler.

input { type: "checkbox", onChange: dispatch <| MyCheckboxChanged <<< E.inputChecked }

inputText :: InputChangeEvent -> String

Convenience accessor for extracting the value of an <input type=text> tag in its onChange handler.

input { type: "text", onChange: dispatch <| MyInputChanged <<< E.inputText }

selectSelectedValue :: SelectChangeEvent -> String

Convenience accessor for extracting the selected value of a <select> tag in its onChange handler.

select { onChange: dispatch <| MyInputChanged <<< E.selectSelectedValue }

textareaText :: TextAreaChangeEvent -> String

Convenience accessor for extracting the value of a <textarea> tag in its onChange handler.

textarea { onChange: dispatch <| MyTextareaChanged <<< E.textareaText }

handleEffect :: forall event f. HandleEffect event f => f -> EffectFn1 event Unit

An escape-hatch way to create an event handler for when neither handle nor handleMaybe are appropriate, which usually happens when the event handler must do something else, besides dispatching a message.

The argument may be either an Effect Unit or a function from the event object to Effect Unit. If a message needs to be dispatched, the consuming code is expected to do it via calling the Dispatch function directly.

div
  { onKeyDown: E.handleEffect \(E.KeyboardEvent e) -> do
      window >>= localStorage >>= setItem "Last key pressed" e.key
      dispatch PressedKey
  , onClick: E.handleEffect \e -> do
      E.stopPropagation e
      dispatch ClickedDiv
  }

stopPropagation :: forall e. IsSyntheticEvent e => e -> Effect Unit

Prevents propagation of the event up the React DOM tree. See also https://reactjs.org/docs/events.html

preventDefault :: forall e. IsSyntheticEvent e => e -> Effect Unit

Prevents the default handling of the event by the browser. See also https://reactjs.org/docs/events.html

getModifierState :: forall e. IsKeyboardOrMouseEvent e => String -> e -> Boolean

Returns the state of a given modifier key during an event, as defined in https://reactjs.org/docs/events.html#keyboard-events

This function applies only to certain kinds of events, such as MouseEvent or KeyboardEvent.