Home | Hello world | Component | Pursx 1 | Events 1 | Effects | Pursx 2 | Events 2 | Portals | SSR |

Events

Listening to the DOM

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:

Event handling

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.

Next steps

In this section, saw how to react to events. In the next section, we'll use a similar mechanism to deal with arbitrary effects.