How to Log All Events Fired by an Element in Jquery

How do you log all events fired by an element in jQuery?

$(element).on("click mousedown mouseup focus blur keydown change",function(e){
     console.log(e);
});

That will get you a lot (but not all) of the information on if an event is fired... other than manually coding it like this, I can't think of any other way to do that.

How do I view events fired on an element in Chrome DevTools?

Hit F12 to open Dev Tools
Click the Sources tab
On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
Click on the events you want to listen for.
Interact with the target element, if they fire you will get a break point in the debugger

Similarly, you can right click on the target element -> select "inspect element" Scroll down on the right side of the dev frame, at the bottom is 'event listeners'. Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)

How to find out which JavaScript events fired?

Looks like Firebug (Firefox add-on) has the answer:

open Firebug
right click the element in HTML tab
click Log Events
enable Console tab
click Persist in Console tab (otherwise Console tab will clear after the page is reloaded)
select Closed (manually)

there will be something like this in Console tab:

...
mousemove clientX=1097, clientY=292
popupshowing
mousedown clientX=1097, clientY=292
focus
mouseup clientX=1097, clientY=292
click clientX=1097, clientY=292
mousemove clientX=1096, clientY=293
...

Source: Firebug Tip: Log Events

How can I bind all events on a DOM element?

there is a simple (but not accurate) way to test all events:

function getAllEvents(element) {
    var result = [];
    for (var key in element) {
        if (key.indexOf('on') === 0) {
            result.push(key.slice(2));
        }
    }
    return result.join(' ');
}

then bind all events like this:

var el = $('#some-el');
el.bind(getAllEvents(el[0]), function(e) {
    /* insert your code */
});

Jquery trigger a function on any and all custom events

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

How to check if an event was fired or not?

Regarding Chrome, checkout the monitorEvents() via the command line API.

Open the console via Menu > Tools > JavaScript Console.
Enter monitorEvents(window);

View the console flooded with events

...
mousemove MouseEvent {dataTransfer: ...}
mouseout MouseEvent {dataTransfer: ...}
mouseover MouseEvent {dataTransfer: ...}
change Event {clipboardData: ...}
...

There are other examples in the documentation. I'm guessing this feature was added after the previous answer.