将点击事件绑定到 td vs table答案

【问题标题】：Binding click event to td vs table将点击事件绑定到 td vs table
【发布时间】：2011-05-18 23:30:38
【问题描述】：

我想在 HTML 中构建类似 excel 的实用程序。假设我的 table[id "myTbl"] 有 20 行和 20 列。每当用户以 td 文本作为其值单击它时，我想在 td 内添加文本框。

假设我的桌子是

我有 2 个选项来实现这一点 [两者都工作正常]

选项一

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

选项二

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

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

【问题讨论】：

为什么不在所有单元格中预先隐藏文本框，然后在单击和模糊时显示/隐藏它？
但这会增加我的页面大小。用户也不必单击每个 td。对吗？
没错，但您问的是性能。现代带宽只有很少的额外千字节不会对页面加载时间产生任何明显影响。 :)

标签： javascript jquery performance

【解决方案1】：

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

要使用 'jQuery' 方式，您可能需要使用 delegate:

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

【讨论】：

打我一拳。应该注意的是，委托方法是在 1.4.2 中添加的，所以你需要使用最新的东西。
该代码是否与为每个td 创建事件处理程序做同样的事情？另外，为什么是'jQuery'方式？
不，它只创建一个事件处理程序。它是“jQuery 方式”，因为这是一个专门用于此目的的 jQuery 函数；它为您处理事件目标逻辑等（处理函数的上下文是td 元素）。
它在文档中说它相当于这个$("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); });，如果我没记错的话（抱歉混搭代码），它会抓取当前表中的所有 tds 并添加一个实时悬停事件给每一个人。
效果相当，但效率更高。它在单个事件处理程序中使用事件冒泡。我只知道，因为我问了 Nick Craver 的同一个问题 ;)

【解决方案2】：

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

【讨论】：