[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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* (c) 2013,2014,2015 by DBJ.ORG, GPL/MIT applies expr argument is any legal jQuery selector. returns array of { element: , events: } objects events: is jQuery events structure attached (as data) to the element: return is null if no events are found */ jQuery.events = function (expr ) { var rez = [], evo ; jQuery(expr).each( function () { if ( evo = jQuery._data( this, "events")) rez.push({ element: this, events: evo }) ; }); return rez.length > 0 ? rez : null ; } |
Usage example and event list structure (partial) explanation:
|
1 2 3 4 5 6 7 8 |
/* first attach the click event to some lonely single div in your html */ $("div").click ( function (Evt) { /* event handler */ } ) ; /* elsewhere we can get the list of events we or anybody else has attached to the div */ var event_list = jQuery.events("div") ; |
Only one event above was added to our div. event_list returned is an array of { element, events } objects. In our case only one :
|
1 2 3 4 5 |
{ element: [object HTMLDivElement], events: { click: [object Object] } } |
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:
|
1 2 3 4 5 6 7 8 9 10 |
{ type: click, origType: click, data: null, handler: function (Evt) { }, guid: 11, selector: undefined, needsContext: undefined, namespace: } |
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.