Question

我们说我们有以下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事件，而在第一个示例中，当到达文档时它会被触发。我可以想象，在复杂的结构化网站中，可能会带来一些性能提升。

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

Answer 1

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

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

jQuery docs on Event Performance说明了这一点：

在文档顶部附近附加许多委托事件处理程序树会降低性能。每次事件发生时，jQuery都必须比较该类型的所有附加事件的所有选择器从事件目标到最高层的路径中的元素文献。为了获得最佳效果，在文档中附加委托事件 位置尽可能接近目标元素。避免过量将document或document.body用于大型委托事件文档。

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

1 个答案: