elm-community / typed-svg / TypedSvg.Events

Animation event attributes

onBegin : msg -> TypedSvg.Core.Attribute msg

onEnd : msg -> TypedSvg.Core.Attribute msg

onRepeat : msg -> TypedSvg.Core.Attribute msg

Document event attributes

onAbort : msg -> TypedSvg.Core.Attribute msg

onError : msg -> TypedSvg.Core.Attribute msg

onResize : msg -> TypedSvg.Core.Attribute msg

onScroll : msg -> TypedSvg.Core.Attribute msg

onLoad : msg -> TypedSvg.Core.Attribute msg

onUnload : msg -> TypedSvg.Core.Attribute msg

onZoom : msg -> TypedSvg.Core.Attribute msg

Graphical event attributes

onActivate : msg -> TypedSvg.Core.Attribute msg

onAuxClick : msg -> TypedSvg.Core.Attribute msg

onClick : msg -> TypedSvg.Core.Attribute msg

onContextMenu : msg -> TypedSvg.Core.Attribute msg

onDblClick : msg -> TypedSvg.Core.Attribute msg

onFocusIn : msg -> TypedSvg.Core.Attribute msg

onFocusOut : msg -> TypedSvg.Core.Attribute msg

onMouseDown : msg -> TypedSvg.Core.Attribute msg

onMouseEnter : msg -> TypedSvg.Core.Attribute msg

onMouseLeave : msg -> TypedSvg.Core.Attribute msg

onMouseMove : msg -> TypedSvg.Core.Attribute msg

onMouseOut : msg -> TypedSvg.Core.Attribute msg

onMouseOver : msg -> TypedSvg.Core.Attribute msg

onMouseUp : msg -> TypedSvg.Core.Attribute msg

Custom Events

on : String -> VirtualDom.Handler msg -> VirtualDom.Attribute msg

Create a custom event listener.

import Json.Decode as Json
import VirtualDom

onClick : msg -> Attribute msg
onClick msg =
    on "click" (VirtualDom.Normal <| Json.succeed msg)

You first specify the name of the event in the same format as with JavaScript’s addEventListener. Next you give a virtual DOM handler with a JSON decoder, which lets you pull information out of the event object. If the decoder succeeds, it will produce a message and route it to your update function.