A bookmarklet showing information about Prototype.js event handlers
Inspired by kangax' bookmarklet showing the overall number of event handlers registered with Prototype's observe() method, the Eventlist bookmarklet goes one step further: It shows which HTML elements (exluding window and document!) have how many event handlers attached to them. When hovering an item of the list a second window pops up showing what kind of event handlers and how many of them are registered with the hovered element. To give yet more context the element corresponding to the hovered list item receives a red outline overlay. Voilà for the basic functionality.
But there's more
Eventlist can track event handlers across scripted DOM manipulations, including XHR. Clicking the Update button after any DOM manipulation will update the list in a couple of ways.
The Handler Count column of a previously listed element may show one more entry, maybe in a different color, and newly added rows will be highlighted in green. Let's have a closer look at the meaning of these colors, beginning with the simplest case:
No color
If a previously existing list item's Handler Count column shows another entry on the default beige background, it gives you the number of event handlers currently registered with the element. No color means: All handlers have been and are active.
Green
A green-backgrounded row having only one Handler Count entry signifies a newly created element. All its registered handlers are active.
If there are multiple Handler Count entries, the last (rightmost) entry gives the current handler count, while the green color indicates that the handlers referenced in the previous column(s) have been correctly removed before modifying the DOM.
Red
The element is no longer part of the DOM, but the event handlers previously attached to it still exist in Prototype's internal cache. To avoid stale handlers, it might be good idea to call stopObserving() on the element before removing it from the DOM.
Orange
The element has been and still is again part of the DOM, but at least one of the handlers previously registered is now stale: It is no longer attached to the element, but still exists in Prototype's internal cache. The detail list for this element shows the type and number of currently active handlers. Again, the stale handlers whould probablybe unregistered before removing the corresponding element from the DOM.
Green, Red, Orange
The element once existed (green), then had been removed, leaving stale handler functions in Prototype's cache (red), and now has again been added to the DOM with at least one active event handler (orange). Again the detail window for this element shows the type und number of currently active event listeners. And again the red part of
the row indicates that stale handlers exist in Prototype's cache.
Selective tracking
Sometimes you might be interested in tracking just one or a few elements instead of the whole list. The unwanted items may be removed by unchecking their checkbox. To bring them back again click Reset or the bookmarklet's link.
Supported Browsers
I don't care about IE6 any longer
Installation
Just drag the Eventlist bookmarklet into your Bookmarks or Favorite folder.
Usage
Click it on any page using Prototype.js >= 1.6.0.1.
Final Note
Event handlers registered with window and document do not show up in the list, nor do the handlers registered by the bookmarklet itself. This explains the difference between the total number of event handlers displayed in the bookmarklet's header section and the number announced by kangax's bookmarklet.