在单元格元素上绑定事件的最佳方法

Question

我有一个由JS脚本填满的网页，它创建了很多HTML表格。

创建的<table>个数可以在1到1000之间变化，每个中包含100个单元格。

我的问题是：如何有效地绑定这些表上的点击？我应该将<table>的每个单元格上的点击或直接绑定到<table>本身，并检索在绑定函数中单击的单元格吗？

或者你有另外一个想法吗？

由于

P.S：我正在使用IE6 +

Answer 1

我建议您使用delegate。

$("table").delegate("td", "click", function(){
    alert($(this).text()); // alert td's text.
});

委托只会绑定一个事件，即上下文（在本例中为<table>）。

Answer 2

由于你似乎使用jQuery，你应该在表上使用delegate()方法，例如：

$('table').delegate('td', 'click', function() {
    // $(this) refers the the clicked cell
});

这会将一个事件处理程序绑定到表并捕获冒泡的单击事件。

绑定如此多的事件处理程序，即每个单元格的事件处理程序，确实不是一个好主意，尤其不是在IE中（出于性能原因）。

Answer 3

在表上绑定事件以加快执行速度并获取该函数内的单元格详细信息。

Answer 4

你可以在这里找到一个类似的toppic： large table with lots of events, is using event bubbling more effecient?

我会用这种方式：

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