javascript - 如果我将 .on ('click' 事件附加到 $ ("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;
});

这段代码更容易维护。但是，将其附加到 body 上会有任何性能劣势吗？

Answer 1

除非您有数百个处理程序或非常大的文档，否则您无需担心性能。

摘自 documentation :

在大多数情况下，事件(例如点击)很少发生，因此性能不是一个重要问题。但是，mousemove 或 scroll 等高频事件每秒可触发数十次，在这些情况下，明智地使用事件变得更加重要。可以通过减少处理程序本身完成的工作量、缓存处理程序所需的信息而不是重新计算它，或者通过使用 setTimeout 限制实际页面更新的次数来提高性能。

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