如果我附加.on(’点击’事件到$(“body”),性能是否会受到影响?
我目前有以下代码:
$('#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; });
这段代码更容易维护。 然而,将它连接到身体会有任何性能劣势吗?
除非您有数百个处理程序或超大文档,否则您无需担心性能问题。
文档摘录:
在大多数情况下, 点击等事件很少发生,性能不是一个重要问题 。 然而,诸如鼠标移动或滚动之类的高频事件每秒可以发射数十次,并且在这些情况下,明智地使用事件变得更加重要。 通过减少处理程序本身完成的工作量,缓存处理程序所需的信息而不是重新计算它,或者通过使用setTimeout限制实际页面更新的数量,可以提高性能。
在文档树顶部附近附加许多委派的事件处理程序会降低性能 。 每次事件发生时,jQuery必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。 为获得最佳性能,请将文档位置的委派事件尽可能靠近目标元素。 避免过度使用文档或document.body来处理大型文档上的委托事件。
在jQuery中,将.on()放在DOM中越高,它就越慢。 这是因为jQuery必须将所选类型的所有附加事件的所有选择器从目标与文档级别进行比较。
请参阅.on()的jQuery文档页面 :
在文档树顶部附近附加许多委派的事件处理程序会降低性能。 每次事件发生时,jQuery必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。 为获得最佳性能,请将文档位置的委派事件尽可能靠近目标元素。 避免过度使用文档或document.body来处理大型文档上的委托事件。
有了这个说法,点击事件的性能差异可能可以忽略不计,因为与滚动或鼠标移动事件不同,它们不经常点火(仅在用户点击时)。