15

我目前有以下代码：

$('#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;
});

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

4

2 回答 2

7

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

从文档中提取：

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

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

于 2012-09-03T16:26:07.050 回答
4

在 jQuery 中，将 .on() 放在 DOM 中的位置越高，它就会越慢。这是因为 jQuery 必须比较从目标到文档级别的所选类型的所有附加事件的所有选择器。

请参阅.on() 的 jQuery 文档页面：

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

话虽如此，单击事件的性能差异可能可以忽略不计，因为与滚动或鼠标移动事件不同，它们很少触发（仅在用户单击时）。

于 2012-09-03T16:32:45.567 回答