来自文档或下一个静态父级的事件委托答案

【问题标题】：Event delegation from document or next static parent来自文档或下一个静态父级的事件委托
【发布时间】：2015-04-09 13:31:40
【问题描述】：

假设我们有以下 HTML（在页面加载后添加了一个按钮）：

<div id="container">
    <button>Static button</button>
    <button>Dynamical button</button>
</div>

现在我想知道这两个事件处理程序之间的确切区别：

$(document).on('click', '#container button', function() {});

$('#container').on('click', 'button', function() {});

据我了解事件冒泡，第二个示例执行回调函数的速度稍快一些。这是因为当到达容器锚点时会触发 click 事件，而在第一个示例中，当到达文档时会触发 click 事件。我可以想象，在复杂的结构化网站中，这可能会带来一些性能提升。

我说得对吗？还有其他好处吗？如果性能差异消失，我是否可以将所有事件附加到文档以保证动态添加的元素也得到处理？

【问题讨论】：

我不知道除了性能之外还有什么好处。如果您的事件处理程序数量很少，或者它是一个不会经常触发的事件（即不是单击或滚动之类的事件），那么您通常可以将所有内容绑定到文档。
@AnthonyGrist 那么如何将所有点击事件（比如 50 个）绑定到文档？这会是一个显着的性能损失吗？
我怀疑你需要超过 50 个才能引起问题，但我不想承诺任何事情。在性能方面，唯一确定的方法就是对其进行基准测试。

标签： javascript jquery jquery-events event-delegation

【解决方案1】：

是的，第二个版本比第一个版本有性能提升。

但这并不是因为事件需要更少的时间来冒泡。这完全可以忽略不计。相反，它是关于减少开销 - 如果您将处理程序绑定到 document，那么整个文档中的 all 点击事件需要每次都针对您的选择器 #container button 进行测试，而不仅仅是那些从容器内冒泡。

jQuery docs on Event Performance 声明如下：

在文档顶部附近附加许多委托事件处理程序树会降低性能。每次事件发生时，jQuery 必须将该类型的所有附加事件的所有选择器与每个从事件目标到顶部的路径中的元素文档。为获得最佳性能，请在文档中附加委托事件 尽可能靠近目标元素。避免过度将document 或document.body 用于大型委托事件文件。

【讨论】：

谢谢，这正是我想要的。