Javascript 向页面添加复杂元素时事件委派与直接绑定

我有一些这样的标记（类只是为了解释）：

及

（旁白：这是一个使用细节/摘要HTML5标签的合适地方吗？这些标签是否会进入最终规范似乎有点不确定，我想要一个滑动过渡，所以我似乎无论如何都需要JS。但我把问题抛给了大众。你好，大众。）

如果根列表是保证在页面加载时存在的唯一（相关）元素，那么为了使.on（）有效工作，我必须将所有事件绑定到该元素，并按照我的理解为每个元素指定精确的选择器。例如，要将单独的函数绑定到相邻的两个按钮上，每次我都必须完整地拼写选择器，a la

$("#root").on("change", "li > section button.b1", function() {
  b1Function();
}).on("change", "li > section button.b2", function() {
  b2Function();
});

---

准确吗？在这种情况下，在将新项添加到页面时放弃.on（）并绑定我的事件是否更有意义？如果这会对响应造成影响，那么项目的总数最多可能是几十个。

使用（，）绑定事件时，将减少CPU开销。

因为您将绑定到单个“根”元素，而不是潜在的多个单子代元素（每个绑定都需要时间…）

也就是说，当实际事件发生时，您将产生更多的CPU开销，因为它们必须将DOM冒泡到“根”元素

短故事：委托在绑定事件处理程序时节省CPU；当事件触发时（例如，用户单击某物），bind可节省CPU

因此，由您决定哪一点对性能更重要。添加新元素时是否有可用的CPU？如果是这样的话，那么直接绑定到新元素对整体性能来说是最好的，但是如果添加元素是CPU密集型操作，那么您可能会希望委托事件绑定，并让事件触发从所有冒泡中产生一些额外的CPU开销

请注意：

$(<root-element>).on(<event>, <selector>, <event-handler>)

（，）上的

$（）

同：

$(<root-element>).delegate(<selector>, <event>, <event-handler>)

$(<selector>).bind(<event>, <event-handler>)

$（）。委托（，）

而且：

$(<selector>).on(<event>, <event-handler>)

（，）上的

$（）

同：

$(<root-element>).delegate(<selector>, <event>, <event-handler>)

$(<selector>).bind(<event>, <event-handler>)

$（）.bind（，）

.on（）

在jQuery 1.7中是新的，如果您使用的是1.7+，那么

.delegate（，）

只是

.on（，）

的捷径

更新

下面是一个性能测试，它显示委托事件绑定比单独绑定到每个元素更快：。遗憾的是，这个性能测试已经取消

更新

---

下面是一个性能测试，该测试表明，直接绑定到元素而不是委托绑定时，事件触发速度更快：（请注意，这不是一个完美的性能测试，因为绑定方法包括在测试中，但由于

委托

在绑定时运行得更快，这就意味着

绑定

在谈论触发时相对更快）

因为接受的答案有不准确的测试（顺便说一句：测试您的代码，衡量性能，不要盲目地遵循一些“规则”-这不是优化的方式！）这完全是错误的，我发布了修复测试：

这证明在这样一个简单的例子中，委托和直接绑定之间没有区别

只有鼠标移动和滚动这样的事件才会导致委派失败，这些事件每秒会触发x次。这就是您会注意到性能差异的地方

如果你在单个事件上有1ms的差异（不会发生，但这只是一个例子），比如点击，你不会注意到。如果你在一秒钟内发生100次的事件上有1ms的差异，你会注意到CPU消耗

仅仅拥有数千个元素不会对委派的性能产生负面影响-实际上-应该使用它们时就是这种情况-以避免在附加数千个事件处理程序时占用CPU

---

因此，如果你真的需要遵守规则（不要这样做）-除了鼠标移动、滚动和其他可能持续触发的事件外，在任何事情上都使用委派。

+1，我希望看到详细的响应，可能概述性能注意事项。在我看来，如果您知道上限最多是几十个，则任何一种方法都可以。但我相信您知道，有时这些事情会发生一种随时间增长的方式……总共会有几十个元素，还是会有几十个单一类型的元素？在您的示例

button.b2

中，会有这些元素中的一个还是可能有几十个？@nnnnnn，这种情况几乎肯定是以低三位数为界的，但这里有很多热心的复制粘贴者，一个nd谁知道他们会借用代码做什么，所以说重点。@JamesMontagne，外部列表是集合，其中唯一的元数据是名称，但内部列表是这些集合中的资产，这些集合中有一大堆需要显示/操作的元数据——这是CMS的一部分。谢谢，这很好。我认为直接绑定m在我的情况下，这更有意义，因为在现有项目上激发的事件比添加新项目更频繁。此外，这将使我能够更聪明地使用选择器。查看性能测试。触发对每个绑定项目的单击是误导性的，因为用户可能不会这样做。委托远远不是一个更好的执行者“初始负载透视图”。@JECarterII我没有创建很多性能测试，但我认为这样做的目的是在单击链接时显示性能的%差异。单击更多链接会提供更大的数据集，该数据集会给出更准确的统计平均值，对吗？还是我遗漏了什么？我还认为使用

.find（）两个测试中的

都很好，因为它不会因为只在一个测试中使用

.find（）

，而在另一个测试中不使用而影响性能，这就是为什么您的测试具有这样的性能

$(<selector>).bind(<event>, <event-handler>)