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

Question

如果我没有从事件回调中返回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
该DEMO将submit事件气泡显示为<div>！
如果我停止传播或仅阻止默认，它对我没有区别。

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

Answer 1

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

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

Answer 2

on()和live()之间的

here's a comparison涉及冒泡以及jQuery替换live()的原因。 live()的问题是事件被附加到文档中，导致在树上长行以找到处理程序。您可以使用on()执行的操作是将处理程序附加到最近的公共父级，从而避免在树中搜索处理程序的长途旅行 - 这意味着更快的性能。

但我建议你做自己的基准测试。

Answer 3

This test表明早期杀死事件有一个性能优势。 （15％-30％）复杂的DOM可能会有更大的差异。还有一点值得注意的是，捕获事件监听器似乎比冒泡事件监听器略快，无论您在处理事件后如何处理事件。奇怪但有趣;我只在一个浏览器中测试过