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

Question

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

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

&lt;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
That DEMO 将submit事件气泡显示为<div>!
如果我停止传播或只是阻止默认，对我来说没有区别。

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

score 6 · Accepted Answer

性能优势？是的，正如jQuerylive()和on(). 正如@Joseph 还指出的那样，两者之间的区别在于 live 一直传播到树上，而on()只传播到最近的共同父级。

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

score 4 · Accepted Answer

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

但我建议做你自己的基准来检查。

score 2 · Accepted Answer

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

3 回答 3