Firebug: How to see attached events of an object?

Question

I've attached some events to some divs using addEventListener. But where can I see the events in Firebug?

Answer 1

If you are using jQuery, then install FireQuery, it shows all bound events on the HTML DOM panel per element. Very useful addition.

Answer 2

It's probably worth mentioning that Firebug 1.12 introduced getEventListeners(target). The Firebug wiki page for it is here, and there's a very useful blog post about it here.

(Firebug 1.12 was only released in August 2013, so the answer to this question was right when it was originally posted.)

However, there are a couple of caveats for getEventListeners:

First off, it won't work if you pass it a jQuery object; pass it a normal DOM object instead. (Perhaps this is obvious, but it caught me out!)

Secondly, I've found that getEventListeners doesn't always work if I run it before all code on a page has loaded. I'm not sure exactly when it does and doesn't work, but I've certainly seen a situation like this:

>>> getEventListeners(document.getElementById('elementid'))
ReferenceError: getEventListeners is not defined
>>> $._data(document.getElementById('elementid'), "events");
Object { click=[1]}

As you can see, the "longhand" method (from the SO post linked to in the answer) can retrieve the event, but getEventListeners is showing up as not defined. This error is different to the return value you get if getEventListeners runs but reports that an object has no listeners, so I'd say you can use getEventListeners without fear, as it'll be obvious if it's not yet available!

Answer 3

Don't think Firebug has good functionality for that. You might wanna look here.