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
})

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
})

• javascript
• jquery
• event-handling
• jquery-events

• does this help stackoverflow./questions/3489433/… – baao Commented Sep 5, 2016 at 19:03
• It doesnt, because I'm using custom events names and it's not DOM element – Denis Matafonov Commented Sep 5, 2016 at 19:05

4 Answers 4

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/8a530fjx/

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);

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.

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/qhwfzxzb/