List of events attached. The jQuery plugin.

Do you think they have noticed we are not on the list for this event?
Do you think they have noticed we are not on the list for this event?

[Update 2015 June 07]

In case you need the code, or you just want a try, or if you doubt the solution bellow still works, please go to THIS JS fiddle.

[Originally published April 9, 2013]

For each element  DOM itself has a list of events, associated with that element. Currently that list is not exposed. There is no DOM in-built method to list events attached to an element.

Some people have this irresistible urge to get to this list. Perhaps we can help them. Using jQuery there is a way to get to the list of jQuery events attached to each DOM element.

First of all, what is a “jQuery event” ? It is simply any standard DOM event, handled by jQuery. By handled, we mean: attached to or removed from, an DOM element, by jQuery internals.

jQuery is internally maintaining the list of events it was asked to attach/detach to/from an element.  Strictly speaking this is not a ‘list’ but a bit more complex structure. That ‘list’ is internally attached to elements (and managed) by using jQuery data mechanism. There is also so called “undocumented” method jQuery._data() through which we can use the jQuery internalData structure and method. Mix all of this together, add some water, bake for 20 minutes on 200 degrees, and voilà! Here is the plugin some people might appreciate a lot:

Usage example and event list structure (partial) explanation:

Only one event above was added to our div. event_list returned is an array of { element, events } objects. In our case only one :

In our case, only one event (“click”), is attached to our div aka HTMLDivElement.

Drilling further down, “click” is revealed as an array holding (in this case) a single object:

I am sure it is not very difficult to understand what is what in this structure. I can not write a full story here about the internal event structure maintained by jQuery. Please use this plugin and your favourite IDE and debugger and you will very soon have the clear picture about it. I suggest to investigate what is happening with event delegation. Or how this structure looks when attaching more than one event to the same element. And what if you attach two handlers for a single event on the same element. In any case, have fun 🙂

NOTE: The key word here is “internally”. jQuery team gives no guarantees on undocumented methods or internal structures. This plugin is tested with jQuery 1.9.1 and 1.9.2-pre.