jquery - 在 JQuery 中附加事件处理程序。直接绑定(bind)与委托(delegate)

Question

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

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

1. 每个事件处理程序在开始时都会被委托(delegate)。

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

2. 每当哈希值发生更改时，事件处理程序都会直接绑定(bind)到新元素。因此，绑定(bind)和删除处理程序会重复进行。

   $("element").on(事件，处理程序)

哪个性能更好？(查找元素时间与重复绑定(bind)去除时间)(抱歉，我的英语很差...)

Answer 1

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

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

一般来说，当我需要一大组项目对给定事件表现相似时，我通常会使用事件委托(delegate)。

我希望这对您有所帮助。