Have you ever wanted to see all the events from a DOM element? Here's a quick function to have them all show in your console. You can set it to show capturing events (moving down), bubbling events (moving up) and indicate if you only want events originating from the DOM element itself.
/**
* @param elm: HTMLElement
*
* @param phase: boolean
* false for bubbling (events moving toward the top) and true
* for capturing (events moving down)
*
* @param originated: boolean
* did the event originate on target
*/
const watchAllEvents = function (elm, phase = false, originated = true) {
const watchable = /^on/;
for (const key in target) {
watchable.test(key) && elm.addEventListener(key.substring(2), (event) => {
if ((originated && event.target === elm) || ! originated) {
console.log(event);
}
}, phase);
}
}
watchAllEvents.BUBBLING = false;
watchAllEvents.CAPTURING = true;
watchAllEvents(
document.querySelector('#some-div'),
watchAllEvents.CAPTURING,
);