Jquery trigger a function on any and all custom events

Question

I'm trying to figure out when some custom events are firing. This site is designed with jQuery. So I want to add an event listener for all of the custom .trigger events. I tried:

$('*').on('*', function(e) {
     console.log('custom event name that just triggered:', e.eventName, 'selector of element that it triggered on:', e.target);
});

This didn't work. I know if I watched all it would be bad perf, so that's why I'm trying to not watch the standard events, just the custom ones.

Answer 1

There's a way you can generate a list of all events added to your page, however I'd advise against doing it in production code. If you can avoid doing it altogether, that's superb, but basically you want to run the following snippet before loading any other JavaScript on your page.

var events = {};
var original = window.addEventListener;

window.addEventListener = function(type, listener, useCapture) {
    events[type] = true;
    return original(type, listener, useCapture);
};

This will give you an object whose keys are your triggers.

You can then use these keys to generate a stringy list of your events which you can pass to jQuery.

var list = Object.keys(events).join(" ");

$('*').on(list, function(e) {
     console.log(
        'custom event name that just triggered:', e.eventName,
        'selector of element that it triggered on:', e.target);
});