Differentiate between delegated events and their host event

jQuery delegated events are shown a little confusingly in Visual Event at the moment.

What happens is that it shows the parent event (i.e. the one that jQuery actually attaches to the DOM) and the elements that would trigger the event handler - so, for example if you have a UL with 5 LI tags in it, and attach a delegate event handler to the LIs with the UI as the host, you would see six events in Visual Event.

While this is sort of correct, Visual Event could do a better job of explaining what is going on (currently it shows 'live' text - this should be updated for newer jQuery). It would also be good to update the counters in the bar at the bottom of the window so say how many actual event handlers there are and how many delegated events handlers on child elements - ideally with a way to enable and disable each view so you can filter the view yourself to what you want.

Other libraries probably also have something similar, but lets start with jQuery...

[brownieboy]

More than a little confusing, I'd say. It's totally misleading, in fact.

I looked at a web project today where Visual Event reported nearly 20,000 event handlers on a single page app! Of course, the real number of handlers was only a fraction of that. The high number was down to VE's seeming inability to distinguish between actual handlers and delegated ones.

Here's two example pages.
http://www.users.on.net/~mikeandgeminoz/event.test/non-delegated.html
http://www.users.on.net/~mikeandgeminoz/event.test/delegated.html

The both contain a single table with click event handers set on the rows via jQuery. In the first example, the event handlers are really set on each row, like so:

$('#myTable tbody tr').click(function () {
  alert("hey " + $(this).attr("data-payload"));
});

Visual Event reports 900+ events, which is correct: one for each row.

On the second page, however, the event handlers are delegated, like so:

$('#myTable tbody').delegate('tr', 'click', function () {
alert("hey " + $(this).attr("data-payload"));
});

What this means is that only single event handler is actually registered, at the tbody level. But the jQuery.delegate() function is still able to ascertain which TR row within the tbody you actually clicked on. (jQuery.on can work the same way.) Yet Visual Event is still reporting that same 900+ event handlers, and each table row is still highlighted as having its own event handler.

Sorry, but that's just plain wrong! There's only one event handler on the second page. This is confirmed by the Firefox HTML Inspector. (That's the one built into Firefox, and not Firebug.) The Firefox Inspector now shows a white on black "EV" box next to every HTML element that it deems to have an event handler. And this correctly shows an "EV" box next to every TR tag on my first page, but only a single "EV" box next to the tbody tag on my second page. A good deal more reliable that Visual Event is at the moment.

Thanks for the feedback. I haven't had time to work on this yet, but it does need to be done when I get a chance to do so.