Jquery On事件。 代表和速度问题

Question

我在我的代码中使用了一些事件，例如：

$( "body" ).on( "click", '.editButton', clickFunction);

它为Body内部具有类.editButton的每个元素创建事件。 我将此事件添加到Body元素，因为我不知道我在哪里可以在代码中使用此按钮，有时我正在对网站的不同部分做很多ajax请求，我希望它们都能触发clickFunction。 这种方法对一般页面速度有什么影响？ 如果我有5-6个这样的委托事件怎么办？ 我不确定它是如何工作的。 如果我通过Ajax调用添加一些新的html元素，那么脚本会搜索.editButton元素的每个Body元素并为它创建click事件吗？ 当我几乎没有这样的事件时，它会像那几次一样完成吗？ 它有多快？ 这是我们必须关注的事情吗？

Answer 1

如果我通过Ajax调用添加一些新的html元素，那么脚本会搜索.editButton元素的每个Body元素并为它创建click事件吗？

嗯，这不是JavaScript中的事件委派的工作原理。 您只将事件处理程序附加到父节点一次。 在你的情况下body标签。

现在，当任何节点上的任何事件发生时，事件都会向上传播到DOM树。 （事件冒泡）。 一旦它命中了事件处理程序，就会检查处理程序的目标并使用它执行回调函数。

在您的情况下，无论何时单击编辑按钮（或单击任何按钮），事件都会向上移动到您拥有click处理程序的正文。 它看到目标是.editButton ，JS知道这是你的处理程序的目标。

正如您所看到的，当您的dom树太深时，性能降低的唯一方法就是降级。 这就是为什么将事件处理程序添加到公共父级并始终添加到某些使用的body或文档的良好实践。

因此添加更多此类按钮不会导致性能问题的任何增加。