Question

所以我通过ajax加载x行数据。在每一行的末尾，我添加了一个编辑按钮，它将有一个点击处理程序来执行操作。

$newTr.append(
    $("<img/>", {
        title: "edit task",
        "class": "edit clickable changeTask",
        src: "../../images/edit.png"
    })
)

我应该将点击处理程序附加到类：

$(document).on("click", ".changeTask", function(){ //do stuff

或者我应该将它附加到每个img：

$newTr.append(
    $("<img/>", {
        title: "edit task",
        "class": "edit clickable changeTask",
        src: "../../images/edit.png",
        click: function() {
            //do stuff
        }
    })
)

注意：这绝对是一个性能问题。两种方式都有效。另外，如果你能指出一种自己测试这种事情的方法，我会很感激。

Answer 1

用你的话说“将它附在课堂上”会更快。

请注意，您实际执行的操作是将单个处理程序附加到document，它通过使用事件冒泡来侦听要在任何.changeTask元素上触发的事件。

这与第二个示例不同，在第二个示例中，您将单独的事件处理程序附加到每个 <img />。

此处唯一的潜在性能是，如果您正在解雇数千个click个事件，因为document上的处理程序必须检查每个事件以查看它是否是相关。如果可能的话，尽可能将处理程序附加到元素上（因为它必须过滤较少的垃圾）。 这与99.99999％的情况无关。

jQuery单击处理程序性能 - 附加到类或每个元素

1 个答案: