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.
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)
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 =
stopPropagationOn "input" <|
Json.map alwaysStop (Json.map tagger targetValue)
alwaysStop : a -> (a, Bool)
alwaysStop x =
(x, True)
You probably will never need this, but hopefully it gives some insights into how to make custom event handlers.
custom : String -> Json.Decode.Decoder { message : msg, stopPropagation : Basics.Bool, preventDefault : Basics.Bool } -> Html.WithContext.Attribute context msg
Create an event listener that may stopPropagation
or
preventDefault
.
Note: If you need something even more custom (like capture phase) check
out the lower-level event API in elm/virtual-dom
.
preventDefaultOn : String -> Json.Decode.Decoder ( msg, Basics.Bool ) -> Html.WithContext.Attribute context msg
Create an event listener that may preventDefault
. Your decoder
must produce a message and a Bool
that decides if preventDefault
should
be called.
For example, the onSubmit
function in this library always prevents the
default behavior:
onSubmit : msg -> Attribute msg
onSubmit msg =
preventDefaultOn "submit" (Json.map alwaysPreventDefault (Json.succeed msg))
alwaysPreventDefault : msg -> ( msg, Bool )
alwaysPreventDefault msg =
( msg, True )
stopPropagationOn : String -> Json.Decode.Decoder ( msg, Basics.Bool ) -> Html.WithContext.Attribute context msg
Create an event listener that may stopPropagation
. Your decoder
must produce a message and a Bool
that decides if stopPropagation
should
be called.
Note: This creates a passive event listener, enabling optimizations for touch, scroll, and wheel events in some browsers.
on : String -> Json.Decode.Decoder msg -> Html.WithContext.Attribute context 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 Decode
onClick : msg -> Attribute msg
onClick message =
on "click" (Decode.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 helps!
Note: This creates a passive event listener, enabling optimizations for touch, scroll, and wheel events in some browsers.
onFocus : msg -> Html.WithContext.Attribute context msg
onBlur : msg -> Html.WithContext.Attribute context msg
onSubmit : msg -> Html.WithContext.Attribute context msg
Detect a submit
event with preventDefault
in order to prevent the form from changing the page’s location. If you need
different behavior, create a custom event handler.
onCheck : (Basics.Bool -> msg) -> Html.WithContext.Attribute context msg
Detect 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.
onInput : (String -> msg) -> Html.WithContext.Attribute context msg
Detect input events for things like text fields or text areas.
For more details on how onInput
works, check out targetValue
.
Note 1: It grabs the string value at event.target.value
, so it will
not work if you need some other information. For example, if you want to track
inputs on a range slider, make a custom handler with on
.
Note 2: It uses stopPropagationOn
internally to always stop propagation
of the event. This is important for complicated reasons explained here and
here.
onMouseOut : msg -> Html.WithContext.Attribute context msg
onMouseOver : msg -> Html.WithContext.Attribute context msg
onMouseLeave : msg -> Html.WithContext.Attribute context msg
onMouseEnter : msg -> Html.WithContext.Attribute context msg
onMouseUp : msg -> Html.WithContext.Attribute context msg
onMouseDown : msg -> Html.WithContext.Attribute context msg
onDoubleClick : msg -> Html.WithContext.Attribute context msg
onClick : msg -> Html.WithContext.Attribute context msg