How can I monitor all custom events emitted in the browser?

Question

I'd like to monitor all custom events fired within a web browser. Any standard browser will do.

To be clear, I know you can attach event handlers to see when "usual" events are fired, but how can I reliably detect if an embedded object or jQuery script fires a custom event?

I could refactor the browser source code to hook the event loop, but that seems rather extreme.

Answer 1

I'd like to monitor all custom events fired within a web browser.

I don't think you can. The DOM event model works by setting listeners for specific event types, so if you don't know the type of the event, you can't listen for it. There is no way to listen for all events, e.g. there is no addEventListener('*',...).

Also, you don't know how custom events are called. They may not dispatch an event into the DOM (e.g. some libraries implement their own event registration and handling systems) so there is no general way of knowing when event listeners are being called, even if you can track the dispatch of the event.

Some libraries also simulate event bubbling, but again, unless you know the type of event, you can't listen for it.

However, you could implement your own event management system and implement a function to listen for all events for which listeners are set or events dispatched using your system.