This module is mirrored nearly completely from Html.Events
The only difference is that the HTML.Events are turned into Element.Events
onClick : msg -> Element.Internal.Model.Attribute variation msg
onDoubleClick : msg -> Element.Internal.Model.Attribute variation msg
onMouseDown : msg -> Element.Internal.Model.Attribute variation msg
onMouseUp : msg -> Element.Internal.Model.Attribute variation msg
onMouseEnter : msg -> Element.Internal.Model.Attribute variation msg
onMouseLeave : msg -> Element.Internal.Model.Attribute variation msg
onMouseOver : msg -> Element.Internal.Model.Attribute variation msg
onMouseOut : msg -> Element.Internal.Model.Attribute variation msg
onInput : (String -> msg) -> Element.Internal.Model.Attribute variation msg
Capture input
events for things like text fields or text areas.
It grabs the string value at event.target.value
, so it will not work if
you need some other type of information. For example, if you want to track
inputs on a range slider, make a custom handler with on
.
For more details on how onInput
works, check out targetValue.
onCheck : (Basics.Bool -> msg) -> Element.Internal.Model.Attribute variation msg
Capture change
events on checkboxes. It will grab the boolean value from event.target.checked
on any input event.
Check out targetChecked for more details on how this works.
onSubmit : msg -> Element.Internal.Model.Attribute variation msg
Capture a submit
event with preventDefault
in order to prevent the form from changing the page’s location. If you need
different behavior, use onWithOptions
to create a customized version of
onSubmit
.
onBlur : msg -> Element.Internal.Model.Attribute variation msg
onFocus : msg -> Element.Internal.Model.Attribute variation msg
on : String -> Json.Decode.Decoder msg -> Element.Internal.Model.Attribute variation 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 variation 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!
stopPropagationOn : String -> Json.Decode.Decoder ( msg, Basics.Bool ) -> Element.Internal.Model.Attribute variation msg
preventDefaultOn : String -> Json.Decode.Decoder ( msg, Basics.Bool ) -> Element.Internal.Model.Attribute variation msg
custom : String -> Json.Decode.Decoder { message : msg, stopPropagation : Basics.Bool, preventDefault : Basics.Bool } -> Element.Internal.Model.Attribute variation msg
targetValue : Json.Decode.Decoder String
A Json.Decoder
for grabbing event.target.value
. We use this to define
onInput
as follows:
import Json.Decode as Json
onInput : (String -> msg) -> Attribute msg
onInput tagger =
on "input" (Json.map tagger targetValue)
You probably will never need this, but hopefully it gives some insights into how to make custom event handlers.
targetChecked : Json.Decode.Decoder Basics.Bool
A Json.Decoder
for grabbing event.target.checked
. We use this to define
onCheck
as follows:
import Json.Decode as Json
onCheck : (Bool -> msg) -> Attribute msg
onCheck tagger =
on "input" (Json.map tagger targetChecked)
keyCode : Json.Decode.Decoder Basics.Int
A Json.Decoder
for grabbing event.keyCode
. This helps you define
keyboard listeners like this:
import Json.Decode as Json
onKeyUp : (Int -> msg) -> Attribute msg
onKeyUp tagger =
on "keyup" (Json.map tagger keyCode)
Note: It looks like the spec is moving away from event.keyCode
and
towards event.key
. Once this is supported in more browsers, we may add
helpers here for onKeyUp
, onKeyDown
, onKeyPress
, etc.