事件上的Jquery。委托和速度问题

Question

我在代码中使用了以下几个事件：

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

它为具有类.editButton的主体中的每个元素创建事件。我将这个事件添加到Body元素中，因为我不知道在代码中可以将这个按钮放在哪里，有时我会对站点的不同部分执行许多ajax请求，我希望它们都能触发clickFunction。这种方法对一般的页面速度有什么影响？如果我有5-6个这样的代表活动呢？我不知道它是怎么工作的。如果我通过Ajax调用向页面添加一些新的html元素，那么脚本是否为.editButton元素搜索每个Body元素并为其创建单击事件？当我几乎没有这样的事件时，会不会这样做几次？有多快？这是我们必须关心的事情吗？

Answer 1

如果我通过Ajax调用向页面添加一些新的html元素，那么脚本是否为.editButton元素搜索每个Body元素并为其创建单击事件？

在JavaScript中，这并不完全是事件委托的工作方式。只将事件处理程序附加一次到父节点。在您的例子中，是body标记。

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

在您的情况下，只要单击编辑按钮(或单击任何按钮)，事件就会传递到您有click处理程序的身体。它看到目标是.editButton，JS知道这是处理程序的目标。

正如您所看到的，只有当您拥有一棵太深的dom树时，您的性能才会下降。这就是为什么将事件处理程序添加到公共父程序并始终添加到某些使用的body或文档中是很好的做法。

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