Create a custom event listener.

import Json.Decode as Json


onClick : Signal.Address a -> Attribute
onClick address =
    on "click" Json.value (\_ -> Signal.message address ())

You first specify the name of the event in the same format as with JavaScript’s addEventListener. Next you give a JSON decoder, which lets you pull information out of the event object. If that decoder is successful, the resulting value is given to a function that creates a Signal.Message. So in our example, we will send () to the given address.

A Json.Decoder for grabbing event.target.value from the triggered event. This is often useful for input event on text fields.

onInput : Signal.Address a -> (String -> a) -> Attribute
onInput address contentToValue =
    on "input" targetValue (\str -> Signal.message addr (contentToValue str))

A Json.Decoder for grabbing event.target.checked from the triggered event. This is useful for input event on checkboxes.

onInput : Signal.Address a -> (Bool -> a) -> Attribute
onInput address contentToValue =
    on "input" targetChecked (\bool -> Signal.message addr (contentToValue bool))

A Json.Decoder for grabbing event.keyCode from the triggered event. This is useful for key events today, though it looks like the spec is moving towards the event.key field for this someday.

onKeyUp : Signal.Address a -> (Int -> a) -> Attribute
onKeyUp address handler =
    on "keyup" keyCode (\code -> Signal.message address (handler code))

Same as on but you can set a few options.

Options for an event listener. If stopPropagation is true, it means the event stops traveling through the DOM so it will not trigger any other event listeners. If preventDefault is true, any built-in browser behavior related to the event is prevented. For example, this is used with touch events when you want to treat them as gestures of your own, not as scrolls.

Everything is False by default.

defaultOptions =
    { stopPropagation = False
    , preventDefault = False
    }