1

If you've added jQuery events, e.g. 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, e.g.:

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)

Community
  • 1
  • 1
Aske B.
  • 6,419
  • 8
  • 35
  • 62

2 Answers2

0

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!

BLSully
  • 5,929
  • 1
  • 27
  • 43
  • While your answer could be a solution, remember to "*Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline.*": [answer] – Aske B. Sep 21 '12 at 15:52
0

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 ..

Sushanth --
  • 55,259
  • 9
  • 66
  • 105
  • As far as I understand, this solution makes it possible to view the events without much code, but from your text it seems only possible within the actual event scope, and only if you added the `e` argument, so it doesn't seem like a consistent solution. If I'm wrong, please elaborate how this solves the problem in the case where you don't know which events you want to access are, and/or haven't written the event code yourself, and you just want to find the events. Oh, and please don't use "alert" to debug; Use `console.log(e.type, "Current event from type Attribute")` instead. – Aske B. Sep 21 '12 at 16:09