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.

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.

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.

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!

Same as on but you can set a few options.