How to find event listeners on a DOM node?

If you just need to inspect what's happening on a page, you might try the Visual Event bookmarklet.

Up vote 118 down vote favorite 73 share g+ share fb share tw.

I have a page where some event listeners are attached to input boxes and select boxes. Is there a way to find out which event listeners are observing a particular DOM node and for what event? Events are attached using 1) prototype's Event.

Observe 2) DOM's addEventListener 3) as element attribute element. Onclick javascript events dom link|improve this question edited Jan 15 '09 at 16:25 asked Jan 15 '09 at 14:19Navneet7922917.

10 This tool is awesome, thanks for posting. – Brian Wigginton Oct 26 '10 at 23:43 This is truly a useful tool for visualizing events. – hitautodestruct Jan 5 '11 at 9:11 Great tool!

– Juan Luis Soldi Jun 11 '11 at 21:54 Perfect! Beats Firebug's EventBug plugin. – Robin Maben Sep 15 '11 at 8:47 Thanks for the link, this is a very nice tool!

– danny Oct 5 '11 at 10:28.

It depends on how the events are attached. For illustration presume we have the following click handler: var handler = function() { alert('clicked! ') }; We're going to attach it to our element using different methods, some which allow inspection and some that don't.

Method A) single event handler element. Onclick = handler; // inspect alert(element. Onclick); // alerts "function() { alert('clicked!

') }" Method B) multiple event handlers if(element. AddEventListener) { // DOM standard element. AddEventListener('click', handler, false) } else if(element.

AttachEvent) { // IE element. AttachEvent('onclick', handler) } // cannot inspect element to find handlers Method C): jQuery $(element). Click(handler); 1.3. X // inspect var clickEvents = $(element).

Data("events"). Click; jQuery. Each(clickEvents, function(key, value) { alert(value) // alerts "function() { alert('clicked!

') }" }) 1.4. X (stores the handler inside an object) // inspect var clickEvents = $(element). Data("events"). Click; jQuery.

Each(clickEvents, function(key, handlerObj) { alert(handlerObj. Handler) // alerts "function() { alert('clicked! ') }" // also available: handlerObj.

Type, handlerObj. Namespace }) (See jQuery.fn. Data and jQuery.

Data) Method D): Prototype (messy) $(element). Observe('click', handler); 1.5. X // inspect Event.observers. Each(function(item) { if(item0 == element) { alert(item2) // alerts "function() { alert('clicked!

') }" } }) 1.6 to 1.6.0.3, inclusive (got very difficult here) // inspect. "_eventId" is for _prototypeEventID || )0. Click; clickEvents.

Each(function(wrapper){ alert(wrapper. Handler) // alerts "function() { alert('clicked! ') }" }) 1.6.1 (little better) // inspect var clickEvents = element.getStorage().

Get('prototype_event_registry'). Get('click'); clickEvents. Each(function(wrapper){ alert(wrapper.

Handler) // alerts "function() { alert('clicked! ') }" }).

1 Thx for updating this. It's unfortunate that you have to iterate thru each type of handler. – Keith Bentrup Sep 14 '09 at 18:35 2 On "Method B" (addEventListener) here's an answer regarding the status of the enumeration facilities for handlers registered with pure DOM Events API: stackoverflow.com/questions/7810534/… – Nickolay Oct 18 '11 at 23:00 1 This answer is very useful!

Thank you for sharing this! I've been having a lot of problem with a piece of jQuery and your answer helped me figure it out! – Gabriel Feb 1 at 14:10.

WebKit Inspector in Chrome or Safari browsers now does this. It will display the event listeners for a DOM element when you select it in the Elements pane.

3 I'm not sure it shows all the event handlers; just the single HTML event handler. – huyz Jul 25 '11 at 8:21 This is AWESOME. – Ben Alpert Aug 9 '11 at 2:01 1 I should mention EventBug plugin for Firebug for completeness ; – Nickolay Oct 18 '11 at 22:59.

It is possible to list all event listeners in javascript: Is not that hard; you just have to hack the prototype method of the HTML elements (before adding the listeners) function reportIn(e){ var a = this. LastListenerInfothis. LastListenerInfo.

Length-1; console. Log(a) } HTMLAnchorElement.prototype. RealAddEventListener = HTMLAnchorElement.prototype.

AddEventListener; HTMLAnchorElement.prototype. AddEventListener = function(a,b,c){ this. RealAddEventListener(a,reportIn,c); this.

RealAddEventListener(a,b,c); if(!this. LastListenerInfo){ this. LastListenerInfo = new Array()}; this.

LastListenerInfo. Push({a : a, be : be , c : c}); }; Now every anchor element ( ) will have a 'lastListenerInfo' propierty wich contains all of its listeneres. And it even works for removing listeners with anonymous functions.

This method won't work if you're writing a user script or content script. Not only are likely to be sandboxed these days but how can you guarantee the order of execution? – huyz Jul 25 '11 at 8:22.

If you have Firebug, you can use console. Dir(object or array) to print a nice tree in the console log of any javascript scalar, array, or object. Try: console.

Dir(clickEvents); or console. Dir(window).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.