how to log all events (use actions) an DOM elements that have event listeners?

I would like to record all events that are fired through user action on DOM elements. A feature like recording user actions (macro) on my website so the app can later re-generate the current state by executing use actions sequentially. How to do it?

Is there any API or solution to find all events that are processed by event listeners?
Or should I gather events by myself? If so, what would be your approach/solution/design?

this OP says no:


It would be technically possible to record such a thing by

(1) using addEventListener exclusively in your site’s code (if you don’t, you’ll have to also iterate through all on- properties and scan for inline handlers too, which is quite a pain)

(2) Overwrite the addEventListener prototype with a custom hander that, when fired, stores information uniquely identifying the click in an array (for example, save the name of the event fired, and a full selector string to the element the event is dispatched to, and if you need it, also the amount of time since the page was loaded)

(3) When needed, save the array somewhere

(4) To emulate the user’s prior actions, retrieve the array, then iterate through it. For each action, create and dispatch an event to the unique selector at the time required.

But this is really, really convoluted. It would make a lot more sense for there to be a single source of truth for what’s being displayed on your page. To save a state, just serialize the object that holds the data. To resume a state, retrieve the object and render according to its contents.

Leave a Reply

Your email address will not be published. Required fields are marked *