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

Question

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

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

我应该将点击处理程序附加到类中吗:

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

或者我应该将它附加到每个图像:

$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% 的情况下都是无关紧要的。