如果我附加.on('点击'事件到$("body"),性能是否会受到影响？

Question

我目前有以下代码:

$('#loginLink, #registerLink').click(function () {
        dialog(this);
        return false;
    });

$('#detailData')
    .on('click', '.modalDeleteLink, .modalEditLink', function () {
        dialog(this);
        return false;
    })

#loginLink和#registerLink只有一个,但是.modalDeleteLink和.modalEditLink类可能有多达一百个元素.

我想改变所有这些元素,所以他们有一个.dialogLink类,然后只使用以下代码:

$("body").on("click", ".dialogLink", function(){
   dialog(this);
   return false;
});

这段代码更容易维护.然而,将它连接到身体会有任何性能劣势吗？

Answer 1

除非您有数百个处理程序或超大文档,否则您无需担心性能问题.

摘自文档:

在大多数情况下,诸如点击之类的事件很少发生,性能不是一个重要问题.然而,诸如鼠标移动或滚动之类的高频事件每秒可以发射数十次,并且在这些情况下,明智地使用事件变得更加重要.通过减少处理程序本身的工作量,缓存处理程序所需的信息而不是重新计算它,或者通过使用setTimeout限制实际页面更新的数量,可以提高性能.

在文档树顶部附近附加许多委派的事件处理程序会降低性能.每次事件发生时,jQuery必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较.为获得最佳性能,请将文档位置的委派事件尽可能靠近目标元素.避免过度使用文档或document.body来处理大型文档上的委托事件.