3

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.

Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • 3
    Just as an aside: you want to attach an event-listener to *every* DOM node for *every* event? That's likely to crash your page - or massively compromise performance (think how often `mousemove` fires); try just attaching the event-listeners to the `body` element instead (though this doesn't solve the "*every event*" aspect of your question). – David Thomas Aug 14 '15 at 12:50
  • 1
    Please check this answer:http://stackoverflow.com/questions/7439570/how-do-you-log-all-events-fired-by-an-element-in-jquery – Moussawi7 Aug 14 '15 at 12:51
  • Thanks @DavidThomas, but not for the standard events, I just want to catch all the *custom* event names. – Noitidart Aug 14 '15 at 12:54
  • Thanks @Moussawi7 Im checking it right now. – Noitidart Aug 14 '15 at 12:54
  • 1
    No problem; incidentally how are your custom events being created? I think the only way to achieve this is to attach the event-listener at the point of their creation (which would be easy enough via the use of a function to handle custom-event creation and attachment of event-listeners). – David Thomas Aug 14 '15 at 12:56
  • Thanks @DavidThomas Drats that's a lot of work because I don't know the elements before hand, I'm actually trying to write a bookmarklet for Twitter. So was trying to find out what event is fired when the modal tweet dialog closes, and what event fires when user clicks the "Submit Tweet", and what fires when the new tweet is added to your timeline. – Noitidart Aug 14 '15 at 12:58
  • 1
    @DavidThomas, ```monitorEvents(document.body);``` this will log all events, but it will work only on chrome – Moussawi7 Aug 14 '15 at 12:58
  • @Moussawi7 that's a cool thing, but that will not work for jQuery custom huh? Only standard events? jQuery does `.trigger('custom event name here')` – Noitidart Aug 14 '15 at 12:59
  • @Noitidart, Yeah you are right, it will not cover custom events :'( – Moussawi7 Aug 14 '15 at 13:00
  • 1
    @Noitidart, this answer has a solution for custom events: http://stackoverflow.com/questions/5848598/how-can-i-bind-all-events-on-a-dom-element – Moussawi7 Aug 14 '15 at 13:03
  • 1
    Do you have an exhaustive list of these custom events? – Robin James Kerrison Aug 14 '15 at 13:06
  • Thanks again Moussawi, but these solutions require me to supply an element and know the list of events. My issues is I don't know the list of events nor the elements its firing on, thats why I need to run this script. @RobinJamesKerrison no I dont have, I was hoping jQuery held it somewhere. – Noitidart Aug 14 '15 at 13:07

1 Answers1

2

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);
});
Robin James Kerrison
  • 1,727
  • 1
  • 15
  • 26
  • Thanks Robin, Im not using in production, I only needed this for research on a site Im trying to make a bookmarklet for. The site is twitter, I am not able to add in this code prior to load, is there any run time method possibly? This method also seems to get standard events, is the only way to filter those out manually by hand (like from the list, rmeove the standard ones)? – Noitidart Aug 14 '15 at 13:18
  • 1
    I expect there's some way you could run it early in pageload, perhaps by breakpointing the earliest JS line you can and refreshing, which might be of some help to you. For a list of standard events you might want to filter, check out https://developer.mozilla.org/en-US/docs/Web/Events. Should be fairly simple to add a list of them to the above code and skip adding to the `events` object for any `type` in your list of standard events. – Robin James Kerrison Aug 14 '15 at 13:25
  • Thanks Robin! I'll experiment :) – Noitidart Aug 14 '15 at 13:26