large table with lots of events, is using event bubbling more effecient?

Question

I have a large table/grid that has events on each row, table headers, etc.

Instead of me generating events or binding events to each cell, would it be better to put a 'global' event and then I believe when clicked or mouseover events occur, it will bubble up to my 'global' event on the entire table and then I get filter the event caller and react.

I've read about this before, but not sure if I have the idea correct.

Are there any gotcha's with this approach?

Answer 1

Yes you've got the idea right, and yes it's better. With jQuery it's just as easy as binding the events directly - look up the .delegate() method. What that lets you do is place an event handler on a container element, and tell it how to route events to handlers based on an ordinary jQuery selector to filter the actual event targets.

Thus:

$('#container').delegate('td.clickMe', 'click', function(e) {
  /* table cell click */
});

Answer 2

This is generally a good approach. The best way to achieve the filtering is to use the native jQuery $().delegate() function, as Pointy suggests. This will definitely be more efficient.

The main gotcha to remember is that not all events bubble by default. jQuery attempts to fix this, but as far as I can tell the submit event on forms does not bubble in Internet Explorer.

Another gotcha to remember is that if you call event.stopPropagation() (or return false from a bound function) functions bound higher up the tree will not be called.

Answer 3

Your idea is right in my opignion. You can achieve it like that:

$("table#yourTable").click(function(evt){
   if($(evt.target).is('td.someTd')) {
     //do whatever you want to do
   }
})

So you bind only one click event and filter the clicked target element.