Capture all the events in JavaScript

Question

I want to be able to capture all events that are both created and dispatched and fire some callback when that happens.

Also, I would like to be able to fire a callback anytime an event is paired with an event listener.

Problems include: dynamically added elements, events whose propagation or bubbling is prevented, and custom events that are generated dynamically. I imagine there would need to be a prototyping of dispatchEvent or something, but I am unsure. Is this even possible?

So, very first question: why? It's wonderful that you want to do this, but it's also really weird. — Mike 'Pomax' Kamermans, Sep 06 '14 at 01:19
Whatever your problem is that requires this, they're probably a better alternative. You can deal with synthetic events easily and also dynamically created elements (there are ways to detect whenever an element is created) — markasoftware, Sep 06 '14 at 01:22
This sounds pretty cool. don't listen to the others that are putting you down. — Ryan, Sep 06 '14 at 01:23
See http://stackoverflow.com/questions/3489433/monitor-all-javascript-events-in-the-browser-console — Etheryte, Sep 06 '14 at 01:33
Not very helpful, @nit. He's doing it programmatically (not in console) and he wants to listen to all events, not just on certain elements — markasoftware, Sep 06 '14 at 01:37

RobG · Answer 1 · 2014-09-06T02:47:34.320

Some event basics:

Events are dispatched "on" a DOM object (usually an element) that is the event target.
Events can firstly propagate down to child elements in a capture phase. This phase is rarely used since it wasn't supported by some widely used browsers until recently.
Events can secondly propagate up to parent elements in a bubbling phase. This phase is commonly used.
Some events don't propagate, they have neither a capture or bubble phase (e.g. focus, blur and submit events). Some events that propagate in some browsers don't propagate in others.
DOM elements that respond to events have an event handler. It can be set to listen for particular events and call a listener function when that event reaches the element, either during capture, bubbling or if the element is an event target.
Listeners can cancel propagation, e.g. a click event on a span inside a link can cancel propagation so the link doesn't get the click

Given the above, it is a practical impossibility to "capture all events" using the Events API. It would require establishing a listener for every event type on every element and be impossible to capture custom events because you have to know about them to set an appropriate listener.

I imagine there would need to be a prototyping of dispatchEvent or something

dispatchEvent is a method of an Event instance, it's not specified to be a constructor (there is no requirement for it to have an internal [[Construct]] method) so not practical to use as such. Browsers aren't required to implement prototype inheritance for host objects (though most do), and the implementation details of host objects and methods are largely hidden, so this is not an option.

You might try extending the Event API, but you really should not mess with host objects.

It seems that you are concerned about dynamically added elements. There is a strategy called "event delegation", where you work out the events you need to listen for, then setup listeners as close to the event targets as you can on an element that doesn't change (e.g. a table element if you are dynamically adding and removing table rows, or a container div for other elements) for the specific event types you need to respond to.

You can also have the functions that are modifying the DOM dispatch custom events to add listeners or whatever.

score 3 · Answer 2 · 2014-09-06T04:35:59.073

If you really want to do this, then you can override addEventListener to keep track of events being registered and fired.

var myEventManager = (function() {
    var old = EventTarget.prototype.addEventListener,
        listeners = [],
        events = [];

    EventTarget.prototype.addEventListener = function(type, listener) {

        function new_listener(listener) {
            return function(e) {
                events.push(e);                  // remember event
                return listener.call(this, e);   // call original listener
            };
        }

        listeners.push([type, listener]);        // remember call
        return old.call(this, type, new_listener(listener));  // call original
    };

    return {
        get_events: function() { return events; },
        get_listeners: function() {return listeners; }
    };

}());

However, there are uncountable reasons not to do this, not least the fact that you will quickly run out of memory as you record thousands of events such as mouse moves. This will also not capture event listeners set in ways such as elt.onclick. Nor of course will it catch listeners set up via the old IE attachEvent API. Most importantly, it will not help with you that events that are generated and listened for internally, such as a mouse click on a check box. (A complete solution would also require handling removeEventListener.)

You can also override createEvent and dispatch in similar fashion, but again, that will capture only events that are explicitly created or dispatched in the JS code.

If you really want to do what you seem to be wanting to, I guess you need to fork Chrome.

Capture all the events in JavaScript

2 Answers2

Linked