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

或者我应该将它附加到每个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%的情况无关.