Large Table With Lots Of Events, Is Using Event Bubbling More Effecient?

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' even

Solution 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 */
});

Solution 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.

Solution 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.