Does anyone know if this is possible using Dev Tools? There is a bookmarklet Visual Event2 (http://www.sprymedia.co.uk/article/Visual+Event+2) that does this, sort of; but it is still lacking.
Does anyone know if this is possible using Dev Tools? There is a bookmarklet Visual Event2 (http://www.sprymedia.co.uk/article/Visual+Event+2) that does this, sort of; but it is still lacking.
The WDT puts that in the sidebar of the Elements tab, below Metrics.
These are usually completely unreadable as it's become rather common to 1. use a third-party DOM library (which will add indirections and essentially always bind the same thing) and 2. use delegation (which will bind on a far-removed parent of the element you've selected).
Firebug doesn't (as far as I know) do it natively, but FireQuery[0] adds a display hook to jQuery-bound events (and more), which may provide more and more useful information than the WDT on these (won't work if you're not using jQuery though)
.live() .delegate() and (usually) .on() will leave the handler on a parent node, making sniffing out all active handlers an expensive DOM-walking task.
Given this limitation, the only problem with displaying event handlers is that developers who don't understand the underlying event model of the platform might not grasp the correspondence between the high-level abstractions in their library-using code and the low level DOM behaviour. Clearly any such developers will become more effective once they know a little more about the platform they are working on.