Monitoring Events This notebook provides a utility function to monitor and inspect events on DOM elements. Click here to see an example. Work in progress, feedback welcome.
Documentation First import the function into your notebook: import {createEventList} from '@mootari/monitoring-events'To create a list, call: 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: listElement.style.setProperty('--bar-timing-func', 'linear');You can review the available properties in 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". useColorHash Derives an event's bar color from its name. Disabled by default. dl.options-list { margin-left: 2em; font-size: .9em; } dl.options-list dt { font-weight: bold; } pre code { display: block; margin-left: 2em; padding: 1em; background: rgba(0,0,0,.05); }
Example The example below contains an <input> element inside a <label>. Events are tracked on the label. Click an event label to see its event object in the Developer Tools console. Uncheck the checkbox to ignore any events from the input element (try typing inside the input with and without the option). .ex { font-family: sans-serif } .ex label { background: #ff8; padding: .5em; display: inline-block } .ex input { vertical-align: baseline; font-size: 1em; font-family: inherit } .ex input { margin-left: .5em; border: 1px solid #aaa; padding: .2em; width: 10em } .ex dl { padding-bottom: .5em } .ex dl dt { font-size: .9em; font-weight: bold } .ex dl dd { margin-left: 0 } .ex dl dt:not(:first-of-type) { border-top: 1px solid #aaa; padding-top: .5em; margin-top: .5em }
viewof includeBubbling = html`<input type=checkbox checked>`
{ const defaults = { invalidation, bubbling: includeBubbling, useCapture: true, useColorHash: true, duration: 5000, }; const input = html`<input placeholder="Type something ...">`; const label = html`<label>Label ${input}</label>`; const filterMouse = n => n.match(/mouse|pointer|click|contextmenu|wheel/); const filterKey = n => n.match(/^key/); const mouseList = createEventList(label, { ...defaults, filter: filterMouse }); const keyList = createEventList(label, { ...defaults, filter: filterKey }); const otherList = createEventList(label, { ...defaults, filter: n => !filterMouse(n) && !filterKey(n) }); // Sets a custom animation timing function, ticking down every quarter second. //for(let l of [mouseList, keyList, otherList]) l.style.setProperty('--bar-timing-func', `steps(12, start)`); return html`<div class=ex> ${label}<br> <dl> <dt>Mouse events</dt><dd>${mouseList}</dd> <dt>Key events</dt><dd>${keyList}</dd> <dt>Other events</dt><dd>${otherList}</dd> `; }
Library
function createEventList(target, options = {}) { const { invalidation = null, className = `event-list-${Date.now().toString(36)}-${(Math.random()*1e10|0).toString(36)}`, // Capture bubbled events. bubbling = true, useCapture = false, onClick = handleClick, eventList = null, filter = (type) => true, layout = 'row', fontSize = '.7em', useColorHash = false, duration = 4000, } = options; const hashBasis = 255; const minHue = 0; const maxHue = 360; const events = eventList || getEventTypes(target, filter); const types = new Map(); const list = html`<div class="${className}">${getStyle(className)}`; list.style.setProperty('--layout', layout); list.style.setProperty('--font-size', fontSize); list.style.setProperty('--bar-duration', `${duration / 1000}s`); for(let type of events) target.addEventListener(type, handleEvent, useCapture || void 0); if(invalidation) invalidation.then(() => { for(let type of events) target.removeEventListener(type, handleEvent, useCapture || void 0); }); return list; function handleEvent(e) { if(!bubbling && e.target && e.target !== target) return; const t = e.type; let el = types.get(t); if(!el) { const title = 'Click to dump last event to console.'; el = html`<span data-type="${t}" title="${title}">${t}`; if(useColorHash) { const hue = minHue + (byteHash(t, hashBasis) / 255 * (maxHue - minHue) | 0); el.style.setProperty('--bar-color', `hsl(${hue},100%,75%)`); } el.onclick = onClick; types.set(t, el); } el.lastEvent = e; el.lastTimestamp = Date.now(); list.insertBefore(el, list.firstElementChild); } function handleClick(e) { e.stopPropagation(); if(!this.lastEvent) return; const evt = this.lastEvent; const age = ((Date.now() - this.lastTimestamp) / 1000).toFixed(1); console.log('%s (%s):', evt.type, `${age}s ago`, evt); } function byteHash(str, initial = 0) { const chars = Array.from(str.toUpperCase().match(/[A-Z]/g) || []); let ret = initial; for(let s of chars) ret ^= (parseInt(s, 36) - 10) / 26 * 255 | 0; return ret; } }
function getEventTypes(element, filterFn) { const types = []; for(let p in element) if(p.match(/^on/)) types.push(p.slice(2)); return filterFn ? types.filter(filterFn) : types; }
function getStyle(className) { return html`<style> .${className} { --bar-color: hsl(195,100%,60%); --bar-duration: 5s; --bar-height: .4em; --bar-timing-func: ease; --bg-duration: .5s; --font-size: .6em; --hover-color: hsl(195,100%,60%); --layout: row; max-width: 100%; line-height: 0; display: flex; flex-direction: var(--layout); flex-wrap: wrap; font: bold var(--font-size) sans-serif; } .${className} span { flex-shrink: 0; flex-grow: 0; display: inline-block; position: relative; padding: .3em .5em calc(.3em + var(--bar-height)); background-color: #888; color: white; margin: 4px; overflow: hidden; animation: var(--bg-duration) var(--bar-duration) backwards ${className}-flash-bg; cursor: default; } .${className} span:hover { animation-fill-mode: none; background-color: var(--hover-color); } .${className} span:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--bar-height); background-image: linear-gradient(90deg, var(--bar-color) 50%, transparent 50%); background-size: 201% 100%; background-position: center right; animation: var(--bar-duration) var(--bar-timing-func) ${className}-flash-bar; } @keyframes ${className}-flash-bg { 0% { background-color: black; } } @keyframes ${className}-flash-bar { 0% { background-position: center left; } } `; }