Javascript 将单击事件绑定到td vs表

我想在HTML中构建类似excel的实用程序。假设我的表[id“myTbl”]有20行20列。每当用户点击td文本作为其值时，我想在td中添加文本框

假设我的桌子是

我有两个选择来实现这一点[两者都很好地工作]

方案一

$("#myTbl").bind("click",function(e){
    var obj = e.target;
    if(obj.nodeName == "TD"){
        $(obj).html("<input type='text' value='"+$(obj).html()+"'></input>");
    }
});

$（“#myTbl”）.bind（“单击”，函数（e）{
var obj=e.target；
if（obj.nodeName==“TD”）{
$（obj）.html（“”）；
}
});

方案二

$("#myTbl tr td").bind("click",function(e){
    if($("input",$(this)).length==0){
        $(this).html("<input type='text' value='"+$(this).html()+"'></input>");
    }
});

$（“myTbl tr td”）.bind（“单击”，函数（e）{
如果（$（“输入”，$（此））.length==0）{
$（this.html（“”）；
}
});

---

我的问题是哪个选项在性能方面更好。

我想说，将它绑定到表会更好，因为您不需要为每个单元格维护所有单击处理程序的额外开销。

两个选项中的第一个将只创建一个事件处理程序，因此它的性能会更高。 通过事件获取目标的成本可以忽略不计

要以“jQuery”方式执行此操作，您可能需要使用：

$（“#myTbl”）。委托（“td”，“click”，function（）{
var$this=$（this）；
$this.html（“”）；
});

击败我。可能需要注意的是，委托方法是在1.4.2中添加的，因此您需要使用最新的东西。该代码与为每个

td

创建事件处理程序的功能相同吗？另外，为什么是“jQuery”方式？不，它只创建一个事件处理程序。这是“jQuery方式”，因为这是一个jQuery函数，正是为了达到这个目的；它为您处理事件目标逻辑等（处理程序函数的上下文是

td

元素）。它在文档中说它相当于这个

$（“表”）.each（function（）{$（“td”），this.live（“hover”，function（）{$（this.toggleClass（“hover”）；}）

如果我没有弄错的话，它（为混搭的代码感到抱歉）会捕获当前表中的所有tds，并向每个tds添加一个实时悬停事件。它的效果相当，但效率更高。它在单个事件处理程序中使用事件冒泡。我之所以知道，是因为我问了尼克·克雷弗同样的问题；）为什么不在所有单元格中预先隐藏文本框，然后单击并模糊显示/隐藏它？但这会增加我的页面大小。用户也无需单击每个td。是吗？没错，但你问的是性能。。由于现代带宽只有很少的额外千字节，因此不会对页面加载时间产生任何可见的影响。：）

$("#myTbl").delegate("td", "click", function() {
  var $this = $(this);
  $this.html("<input type='text' value='"+$this.text()+"'></input>");
});