30:T837,## Documentation First import the function into your notebook: ~~~javascript import {createEventList} from '@mootari/monitoring-events' ~~~ To create a list, call: ~~~javascript listElement = createEventList(targetElement, options) ~~~ The options object is optional. Supported options are listed below. CSS properties that are not exposed through the options object can be overridden on the returned DOM element. E.g. to change the easing type of the progress bar do: ~~~javascript listElement.style.setProperty('--bar-timing-func', 'linear'); ~~~ You can review the available properties in [`getStyle()`](#getStyle). **Behavior options:**

bubbling: Captures events on children. Enabled by default.
duration: Highlight duration of triggered events, in ms.
eventList: Array of event types. If not provided events are found by searching for properties on the target element that are prefixed with "on".
filter: Array.filter() callback that limits tracked events. Ignored when eventList is used.
invalidation: Invalidation promise, allows automatic handler removal.
onClick: Handler for clicks on event names. Defaults to dumping the event object via console.log().
useCapture: Tracks events in capture phase. Use this to track events for which propagation has been stopped. Disabled by default.

**Layout options:**

className: Used to namespace CSS styles. Defaults to event-list-{random string}.
fontSize
: CSS font size of event names.
layout: Orientation of events list. One of "row" (default), "column".
hash: Derives an event's bar color from its constructor name

---