在 JQuery 中附加事件处理程序。直接绑定与委托

Question

我制作了一个单页应用程序。 当哈希值改变时，新元素会通过 ajax 加载到页面中。

我想为新元素设置一个事件处理程序。 有两种方法。

1. 每个事件处理程序在开始时都被委派。

   $("body").on(event, "element", handler)

2. 无论何时更改哈希，事件处理程序都会直接绑定到新元素。 因此，重复绑定和删除处理程序。

   $("element").on(event, handler)

哪个表现更好？ （查找元素时间与重复绑定移除时间） （对不起，我的英文很差……）

Answer 1

了解有关此单页应用程序如何工作的更多信息可能会有所帮助，但也许您可以考虑这些指南

• 您的网页的动态程度如何？如果它是相当静态的（没有改变，这可能是过早的优化）
• 这里涉及多少 DOM 元素？需要单独连接的 DOM 元素越多，必须完成的工作就越多，内存消耗也就越多，等等。
• 您的 DOM 元素嵌套有多深？更深的嵌套意味着更多的事件冒泡。
• 在通过 id 查找元素的情况下，从 jQuery 的角度来看，查找速度非常快，因为 DOM 元素 id 名称应该是唯一的，并且它通常只使用 getElementById 本机方法。
• 在按标签查找元素的情况下，您应该有一个 body 标签，但如果您选择的是这样，您可能有数百个 div 标签。
• 如果您仍然不确定，是时候让 Chrome 开发者工具参与进来，以帮助您进一步微调和诊断您可能遇到的潜在性能问题。
• jQuery 的选择器引擎非常强大和灵活，但并非所有选择器都执行相同的操作。您可以编写一个粗糙的选择器，使浏览器不必要地负担过重。

一般来说，当我需要一大组项目以对给定事件进行类似的行为时，我通常会使用事件委托。

我希望这会有所帮助。