How to find all jQuery events within a given scope when debugging in Chrome Developer Tools (or similar)

Question

If you've added jQuery events, eg click() :

$(element).click(function() {
    debugger;
    //Some code
});

You can't find that click event by browsing a DOM element's properties (in Chrome's Developer Tools or similar) when using breakpoints or using the console, eg:

console.log(element);

However, I discovered that you can find events of elements if you do something like this:

//Finds all events for <img> tags within the scope of
//the HTML-element with the id "container".
var elementsToFindEventsFor = $("img", $("#container"));
var events = [];
$(elementsToFindEventsFor).each(function(i, element) {
    events.push($._data(element, "events"));
});
console.log(events);

jsFiddle: http://jsfiddle.net/Muskar/Mf9Eb/

This gives you the possiblity to browse the events on the returned elements when debugging, but it's not very convenient to write 5 lines of code to do debugging.

So I'm curious to see if there's any more readable and easy-to-write solutions from the jQuery API that I haven't been able to find?

Also see: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

Answer 1

Allan Jardine wrote an excellent bookmarklet for this exact purpose:

Visual Event

Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows:

• Which elements have events attached to them
• The type of events attached to an element
• The code that will be run with the event is triggered
• The source file and line number for where the attached function was defined (Webkit browsers and Opera only)

In addition to being useful for debugging your own code, Visual Event can be used as an educational tool, showing how many web-sites have been authored.

Visual Event is open source software (GPLv2) and a Git repo is hosted on GitHub for you to fork and modify as you wish!

Answer 2

Check this [FIDDLE]

I have added two events to each image , Click and mouseenter

You need to pass the event argument (e in this case) to get the attributes of the selected element ..

Using Chrome Developer Tools if you place a debug point on the debugger() function when the function hits.. You can hover over the e argument and in there is a attribut called handleObj .. If you click that you can see the type of event that called the function..

You also have the information of the current object in type attribute ..