Event Handlers

Capturing Events

The primary focus of the LogUI client is the capturing of events that take place on elements on a given webpage.

Browsers come with a large number of built-in events that can be intercepted by the LogUI client. Any event that is listed in the MDN DOM events specification can be tracked with ease. All you need to do is specify the name of the event in the configuration object for the given element(s) that you wish for this event to be captured for. Examples of events include mouseover (when you hover over an element), or keyup (when the user releases a key when focusing on an element, typically an input field).

While this is all fine and well, one could argue that several of these events can be grouped together. For example, mouseover and mouseout events, when linked together, would constitute hovering in and out of a given element. LogUI provides the ability to group events together. By doing so, one can include additional code to perform checks, or even include additional data within the captured logged event. We call these LogUI event handlers.

When specifying a configuration mapping, like in the example below, note the event setting.

'left-rail-item-mousemovements': {
    selector: '#left-rail-results li',
    event: 'mouseover',
    name: 'LEFT_RAIL_ITEM_MOUSEOVER',
},

When the LogUI attempts to figure out what event to bind to the elements selected by the selector #left-rail-results li, it takes the mouseover string. To work out what to do with this name, it undertakes the following process.

1. It checks this name against the names of all of the LogUI event handlers it has.
2. If the LogUI client has a LogUI event handler with the name mouseover, it then uses that event handler to intercept the event when it occurs on the page.
3. If there is no LogUI event handler by the name, the LogUI client simply binds the element(s) selected to the standard DOM event handler for mouseover.

If the LogUI client gets to Step 3, a default event handler is used, without recourse to any special functionality; the event will simply be logged. If a LogUI event handler is found matching mouseover at Step 2, the special event handler is used to bind to the event(s) that are listed. Control is passed to this special event handler when one of the event(s) on the element(s) occurs.

The advantage of using a LogUI event handler is that you can not only group together multiple events into a common event, but you can also provide additional properties to the LogUI event handler to change the way that it behaves, or even change what data is recorded as part of the logged event.

List of LogUI Event Handlers

Aside from the default event handler, we have implemented several LogUI event handlers to make handling events easier and more customisable. These are listed below.

• MouseHover, dealing with hovering in and out over an element.

• FormSubmission, dealing with the submission of a HTML form.

Adding more LogUI event handlers will be a priority in the near future.

Care has been taken with the names of LogUI event handlers — they must not clash with existing DOM events!