Svg.Events

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][decoder]. When an event occurs, the decoder tries to turn the event object into an Gren 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][elm-architecture-tutorial]. It really helps!

<!--- TODO: Update urls: --> [decoder]: /packages/gren-lang/json/latest/Json-Decode [elm-architecture-tutorial]: https://github.com/evancz/elm-architecture-tutorial/

Note: This creates a passive event listener, enabling optimizations for touch, scroll, and wheel events in some browsers.

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.

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 -> { message : msg, preventDefault : Bool }
alwaysPreventDefault msg =
    { message = msg, preventDefault = True }

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 gren-lang/virtual-dom.