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

Question

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

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

1. 在开始时委托所有事件处理程序。 ```$("body").on(event, "element", handler)```

2. 每当哈希值改变时，事件处理程序直接绑定到新元素。因此，绑定和删除处理程序是重复的。 ```$("element").on(event, handler)```

哪个性能更好？ （查找元素时间 vs 重复绑定和删除时间） （抱歉，我的英语很差...）

- CenterFielder99

---

使用动态委托的唯一原因更快，是因为少构造一个对象，假设两个函数内都使用了 var $this = $(this);。 - Ohgodwhy

Answer 1

也许您可以考虑以下几点，尽管更多关于这个单页应用程序如何工作的信息可能会有所帮助：

• 页面有多动态？如果相对静态（不变化），那么这可能是一种过早优化。
• 涉及多少DOM元素？需要单独连接的DOM元素越多，需要完成的工作就越多，内存消耗也越大等。
• DOM元素嵌套有多深？嵌套越深，事件冒泡就越多。
• 在查找元素ID时，从jQuery的角度来看，查找非常快，因为DOM元素ID名称应该是唯一的，通常只使用getElementById本地方法。
• 在查找元素标签时，您应该只有一个body标签，但如果您选择的是div标签，则可能有几百个。
• 当您仍然不确定时，现在是时候使用Chrome开发人员工具来帮助您进一步微调和诊断可能遇到的性能问题了。
• jQuery的选择器引擎非常强大和灵活，但并非所有选择器的性能都相同。您可以编写一个复杂的选择器，使浏览器不必要地过载。

总的来说，当我需要大量项目在给定事件下表现相似时，我通常使用事件委托。

我希望这对你有所帮助。

- Ralph Caraveo