Log all DOM events

logAllDOMEvents.js

logAllEvents(
    el,
    options = {
        excludeEvents: ['mousemove', 'mouseover', 'mouseout'],
        onlyEvents: [],
        capture: false,
        id: ''
    }
) {
    const watchedEventTypes = [
        'mousedown',
        'mouseup',
        'click',
        'dblclick',
        'mousemove',
        'mouseover',
        'mouseout',
        'mousewheel',
        'keydown',
        'keyup',
        'keypress',
        'textInput',
        'touchstart',
        'touchmove',
        'touchend',
        'touchcancel',
        'resize',
        'scroll',
        'zoom',
        'focus',
        'blur',
        'select',
        'change',
        'submit',
        'reset',
        'load',
        'unload',
        'abort',
        'error',
        'select',
        'change',
        'submit',
        'reset',
        'focus',
        'blur',
        'resize',
        'scroll',
        'search',
        'devicemotion',
        'deviceorientation'
    ]
        .filter((eventType) => {
            if (!options?.onlyEvents) {
                return true;
            }

            return options.onlyEvents.includes(eventType);
        })
        .filter(
            (eventType) => !(options?.excludeEvents || []).includes(eventType)
        );

    const bubbleListeners = watchedEventTypes.map((eventType) => ({
        listener: (event) =>
            console.log(
                `[${options?.id || ''}] capture = false type = ${eventType}`,
                event
            ),
        eventType
    }));

    const captureListeners = watchedEventTypes.map((eventType) => ({
        listener: (event) =>
            console.log(
                `[${options?.id || ''}] capture = true type = ${eventType}`,
                event
            ),
        eventType
    }));

    if (options?.capture === true) {
        captureListeners.forEach(({ listener, eventType }) =>
            el.addEventListener(eventType, listener, true)
        );
    }
    bubbleListeners.forEach(({ listener, eventType }) =>
        el.addEventListener(eventType, listener, false)
    );

    return () => {
        if (options?.capture === true) {
            captureListeners.forEach(({ listener, eventType }) =>
                el.removeEventListener(eventType, listener, true)
            );
        }
        bubbleListeners.forEach(({ listener, eventType }) =>
            el.removeEventListener(eventType, listener)
        );
    };
}

u = logAllEvents(document.body, {
    capture: false,
    excludeEvents: ['mousemove', 'mouseout', 'mouseover']
});
u();