flytreeleft / elm-ui / Element.Events

Mouse Events

onClick : msg -> Element.Attribute msg

onDoubleClick : msg -> Element.Attribute msg

onMouseDown : msg -> Element.Attribute msg

onMouseUp : msg -> Element.Attribute msg

onMouseEnter : msg -> Element.Attribute msg

onMouseLeave : msg -> Element.Attribute msg

onMouseMove : msg -> Element.Attribute msg

Focus Events

onFocus : msg -> Element.Attribute msg

onLoseFocus : msg -> Element.Attribute msg

Key Events

onEnter : msg -> Element.Attribute msg

Custom

on : String -> Json.Decode.Decoder msg -> Element.Attribute msg

Create a custom event listener. Normally this will not be necessary, but you have the power! Here is how onClick is defined for example:

import Json.Decode as Json

onClick : msg -> Attribute msg
onClick message =
    on "click" (Json.succeed message)

The first argument is the event name in the same format as with JavaScript's addEventListener function. The second argument is a JSON decoder. Read more about these here. When an event occurs, the decoder tries to turn the event object into an Elm value. If successful, the value is routed to your update function. In the case of onClick we always just succeed with the given message. If this is confusing, work through the Elm Architecture Tutorial. It really does help!