Documentation

A set of handlers for events, possibly empty. Create new Handlers using onEvent, and combine Handlers together using their Monoid instance.

Create a handler for a specific event type by specifying the type of event and the monadic callback to be invoked when the event occurs.

The provided callback will be given the properties props of this particular event, and the current model of a page. It has the option to do arbitrary IO, and to return a possibly-changed model. It also must specify whether or not the event should continue to propagate outwards to other handlers, by giving a Propagation (either Bubble or Stop).

The callback will only be invoked when an event occurs which matches the conjunction of the specified list of TargetFacts. For instance, to constrain a handler to only events on div elements with class="foo", we would use the TargetFact [tagIs "div", "class" attrIs "foo"].

Notice that each variant of EventType has a type-level index describing what kind of data is carried by events of that type. This means that, for instance, if you want to handle a Click event, which has the type 'EventType MouseEvent', your event handler as created by on will be given access to a MouseEvent data structure when it is invoked. That is to say:

onEvent Click
   [tagIs "div", "class" `'attrIs'\` "foo"]
   (\properties@MouseEvent{} model ->
      do print properties
         print model
         pure (Bubble, model))
  :: Show model => Handlers model

A full listing of all available EventTypes and their corresponding property records can be found in the below section on types and properties of events.

Dispatch all the event handler callbacks for a given event type and its corresponding data.

Event handlers for this event type will be called in the order they were registered (left to right) with the result of the previous handler fed as the input to the next one. If any event handler in the chain returns Stop, then propagation stops at the current Target for that handler.

Get a list of all the events which are handled by these handlers.

Extend a set of Handlers that manipulate some smaller model' to manipulate some larger model, using a Traversal' between the two model types. Whenever a handler is invoked, it will be called with each extant target of the specified Traversal'.

A fact about a Target, such as it having a particular tag or having a particular attribute equal to a particular value.

You can construct a TargetFact using tagIs, attrIs, or window.

A TargetFact specifying that the target must have the HTML tag given; otherwise, this handler will not fire.

A TargetFact specifying that the target must have the HTML attribute given, with the exact value specified; otherwise, this handler will not fire.

A TargetFact specifying that the target must be the root DOM element, that is, the window object.

Indicator for whether an event should continue to be triggered on parent elements in the path. An event handler can signal that it wishes the event to stop propagating by returning Stop.