DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report

Building Custom Dom Event Handlers in Elm

You’re just getting started with Elm 0.18. You’ve gotten used to the basics of the Elm architecture, and how to use the Html.Events package to listen to DOM events. Time to move on to building a more complex form.

Joel Quenneville user avatar by
Joel Quenneville
·
Nov. 23, 16 · Tutorial
Like (2)
Save
Tweet
Share
3.03K Views

Join the DZone community and get the full member experience.

Join For Free

You’re just getting started with Elm 0.18. You’ve gotten used to the basics of the Elm architecture, and how to use the Html.Events package to listen to DOM events. Time to move on to building a more complex form.

You start by adding a select:

initialModel : List String
initialModel =
  [ "Dog"
  , "Cat"
  , "Hamster"
  ]

view : List String -> Html Msg
view animals =
  select [] (List.map animalOptions animals)

animalOptions : String -> Html a
animalOptions animal =
  option [] [ text animal ]

Looking good! Now all you need is to wire up the change event. Hmmm… it looks like Html.Events doesn’t provide an onChange event handler. What do you do now?

Event handlers in Elm 

While Html.Events provides event handlers for the most common events, it does not provide then for all possible events (see this issue for a discussion on adding onChange). However, it does expose a few lower-level functions that you can use to implement your own custom event handler. If you look at the source of the pre-packaged event handlers, they are implemented in terms of these lower-level functions.

A custom event handler is composed of four parts:

  1. The Html.Events.on function to create the handler
  2. The name of a DOM event
  3. A Msg constructor
  4. A JSON decoder

Plain Old DOM Events

When a user selects an option from a dropdown, it broadcasts a change event along with some metadata. That metadata looks like:

{
  bubbles : true,
  cancelBubble : false,
  cancelable : false,
  currentTarget : null,
  defaultPrevented : false,
  target : {...},
  type : "change"
  // ... more
}

In most applications, what we’re interested in is the target key that points to the DOM node where the event originated (i.e. our select). Once we have that DOM node, we can access its current value.

Decoders 

In order to pull a value out of a JavaScript object and into Elm, we’ll need to use a JSON decoder. You can make your own but Http.Events ships with a few convenient decoders to interact with the DOM event.

The most commonly used is Html.Events.targetValue which extracts the string from event.target.value.

Tagging 

Great, we can get strings when a given DOM event fires. However, event handlers need to give us back a Msg type to be handled by our update function, not a string. We are going to want to wrap this string with our Msg (a practice often called “tagging”).

To transform the result of a JSON decoder, we can use the Json.Decode.map function:

type Msg = AnimalSelected String

selectedAnimalDecoder : Json.Decoder Msg
selectedAnimalDecoder =
  Json.Decode.map AnimalSelected Html.Events.targetValue

Putting It All together 

Finally, you combine all these pieces together and allow a generic tagger to be passed in:

type Msg = AnimalSelected String

onChange : (String -> msg) -> Html.Attribute msg
onChange tagger =
  on "change" (Json.Decode.map tagger Html.Events.targetValue)

view : List String -> Html Msg
view animals =
  select [ onChange AnimalSelected ] (List.map animalOptions animals)

Because of the nice lower-level function provided, writing a custom onChange event handler is a one-liner!

Further reading 

Read the source for Html.Events to get more examples of event handlers. They’re all one-liners too; no magic going on here.

Event Elm (email client)

Published at DZone with permission of Joel Quenneville, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • DZone's Article Submission Guidelines
  • HTTP vs Messaging for Microservices Communications
  • The 5 Books You Absolutely Must Read as an Engineering Manager
  • How To Handle Secrets in Docker

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: