停止事件冒泡 - 提高性能？

Posted 2023-05-07

【中文标题】停止事件冒泡 - 提高性能？

【英文标题】：Stop event bubbling - increases performance?

【发布时间】：2012-04-01 14:48:58

【问题描述】：

如果我没有从事件回调中返回 false，或者使用 jQuery 的 e.stopPropagation 功能，则事件会在 DOM 中冒泡。

在大多数情况下，我不在乎事件是否冒泡。就像这个 DOM 结构示例：

​<div id="theDiv">
    <form id="theForm" >
        <input type="submit" value="submit"/> 
    </form>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

通常，我没有像这样的多个嵌套提交回调：

$('#theDiv').submit(function() 
    alert('DIV!');
);
$('#theForm').submit(function(e) 
    alert('FORM!');
    e.preventDefault();
);​

Fiddle 该演示显示submit 事件冒泡到<div>！ 如果我停止传播或只是阻止默认，对我来说没有区别。

在这些情况下，如果我停止传播，我会获得性能优势吗？

【问题讨论】：

它应该没有任何效果，甚至可能是一个成功，因为浏览器一直在冒泡数百万个事件，它不一定只有在有监听器的情况下才会冒泡它们。

@RobG。这就是为什么我想取消它...

为什么不对它进行基准测试？理论上，停止传播 = 少做 = 更快。在实践中，这取决于浏览器的实现细节，而且无论哪种方式都可能难以察觉。

【参考方案1】：

性能优势？是的，正如this performance test between jQuery live() and on() 中所述，有一些轻微的好处。正如@Joseph 还指出的那样，两者之间的区别在于实时传播一直沿树向上传播，而on() 只传播到最近的共同父节点。

在这些测试中，表明on() 可以比live() 高出多达 4 倍。在实践中，这可能仍然不值得分心，但如果你有非常深的 html 结构和大量事件触发器，我想在停止传播方面的性能差异可能是值得的。

【讨论】：

确实，live() 由于这个原因和其他原因现在已被弃用。

【参考方案2】：

here's a comparison 在on() 和live() 之间，这涉及到冒泡和jQuery 替换live() 的原因。 live() 的问题是事件被附加到文档中，导致在树上查找处理程序需要很长时间。你可以用on() 做的是你可以将处理程序附加到最近的公共父级，从而避免在树上长途旅行以寻找处理程序 - 这意味着更快的性能。

但我建议您自己进行基准测试。

【参考方案3】：

This test 表明尽早终止事件具有性能优势。 (15%-30%) 在复杂的 DOM 上可能会有更大的差异。值得注意的是，无论您在处理事件后如何处理事件，捕获事件侦听器似乎比冒泡事件侦听器要快一些。奇怪但有趣；不过我只在一个浏览器中测试过