将click事件绑定到td vs table

Question

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

假设我的桌子是
 

我有2个选项来实现这个目标[两者都运行良好]

选项I

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

备选方案II

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

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

Answer 1

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

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

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

Answer 2

我想说将它绑定到表格要好得多，因为你没有额外的开销来维护每个单元格的所有点击处理程序。