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

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 声明：

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

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

Event delegation from document or next static parent

javascript

jquery

event-delegation

jquery-events