We'll spice up the previous example by adding an event listener to our button. When we do, Deku will keep track of how many times we clicked it. The same goes for a range slider, whose current value is displayed underneath it.
And here's what it produces:
All DOM event handlers, like OnClick
and OnInput
, can be set with a value of type Cb
. This type is a newtype
around (Event -> Effect Boolean)
. To hook the event up to the Deku event bus, you can use the push
function within the event handler. The push function has a signature of (push -> Effect Unit)
. Here, the type one can push in to push
is UIEvents. Whenever a push happens, our Event
receives it and all attributes are updated accordingly.
In this section, saw how to react to events. In the next section, we'll use a similar mechanism to deal with arbitrary effects.