Track all custom events on global variable

Question

I have global variable, let's call it jsEvents which serves as dispatcher for all events in project. There are about 200 listeners and about the same quantity of custom events, such as

$(jsEvents).on('customEvent', function(){
//doing something
})

Now I want to investigate what exactly is going on between one event and another event. So I want to log every event at the time it occurs, so I could check if the sequence is correct.

One way is write console.log in every event listener, but may be it's possible to listen any event? And typeout it's name?

Something like

$(jsEvents).on('*', function(){
//here I want to console.log event's name
})

does this help http://stackoverflow.com/questions/3489433/monitor-all-javascript-events-in-the-browser-console — baao, Sep 05 '16 at 19:03
It doesnt, because I'm using custom events names and it's not DOM element — Denis Matafonov, Sep 05 '16 at 19:05

score 3 · Accepted Answer · answered Sep 05 '16 at 20:53

3

For debugging you could override dispatch of the jQuery event object. Something like this for example:

var temp = $.event.dispatch;

$.event.dispatch = function(event){
    // the event that is passed is the native event, if you want the jquery
    // event, you need the fixed event.
    console.log(jQuery.event.fix( event ));
    temp.call(this, event);
}

https://jsfiddle.net/8a530fjx/

answered Sep 05 '16 at 20:53

Julien Grégoire

16,864
4
32
57

That's the closest match. Something that I also arrived to, modyfiyng `trigger` function in jQuery. I still dont' know what object name the event was called at, but I can filter out DOM events and I can see name of the event. – Denis Matafonov Sep 06 '16 at 12:52

Manoj · Answer 2 · 2016-09-05T19:46:15.847

1

I think it can be done by adding additional data in your custom event and retrieving same in listener

    var event = new CustomEvent('build', { 'detail': elem.dataset.time });
    function eventHandler(e) {
    console.log('The time is: ' + e.detail);
    }

CustomEvent interface can be used to set details which you can retrieve in listener. For more details please refer to CustomEvent Interface

Eidt: Unfortunately this requires to provide detail in customEvent, while adding details can be avoided by using console.log("Custom event is " event.type);

var event = new CustomEvent('build');
function eventHandler() {
console.log('The event is: ' + event.type);
}
document.addEventListener('build',eventHandler,true);
document.dispatchEvent(event);

edited Sep 05 '16 at 19:46

answered Sep 05 '16 at 19:12

Manoj

327
1
11

You mean addding additional data in _each and every_ custom event and after that in _each and every_ listener? That's what I don't want to do - even copying will take hours - I don't really want to rewrite the whole code just to debug it. So the question is how to find and listen all custom events without actually rewritng them. – Denis Matafonov Sep 05 '16 at 19:15
you didnt mention that you dont want to modify your existing listener, "One way is write console.log in every event listener, but may be it's possible to listen any event? And typeout it's name?" - which means you will be midifying your listener – Manoj Sep 05 '16 at 19:30
_one way_ is to modify every listener and its obvious. And difficult. I'm looking for another way. – Denis Matafonov Sep 05 '16 at 19:35

score 1 · Answer 3 · answered Sep 05 '16 at 19:51

you need to modify your event dispatcher. idea is after you done with dispatching an event normally you specially dispatch another event named, say * and in event data pass the actual event name for which it is triggered. than with a single listener registered for * event can help you without modifying your all existing listeners.

score 1 · Answer 4 · answered Sep 05 '16 at 19:56

1

I think what you need is a way to get all events bound to one element:

function getAllEvents(element) {
    var result = [];
    var events = $._data( element[0], "events" );
    for(e in events){
        result.push(e);
    }
    return result.join(' ');
}

Then use that to create a debugger listener:

//listener
$('#testElem').on(allEvents, function(e){
    console.log('the event is :', e);
});

Demo: https://jsfiddle.net/qhwfzxzb/

answered Sep 05 '16 at 19:56

Sam Battat

5,725
1
20
29

I dont' use DOM element as dispatcher, so there is no `$._data` property in it. jQuery lets you use `any` global window property as dispatcher. Not just DOM elements. – Denis Matafonov Sep 06 '16 at 12:26

Track all custom events on global variable

4 Answers4