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

如果我不是從事件回調中返回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>！
如果我停止傳播或只是防止默認，那對我來說沒有什麼不同。

在這些情況下，如果我停止傳播，我會獲得性能好處嗎？

來源

2012-03-16 gdoron

它應該沒有任何影響，甚至可能是因爲瀏覽器始終會觸發數百萬個事件，所以只有在有監聽器時纔會觸發它們。 – RobG 2012-03-16 02:11:58

@RobG。這就是爲什麼我想取消它... – gdoron 2012-03-16 02:14:18

爲什麼你不基準它？理論上，停止傳播=少做=快。在實踐中，它取決於瀏覽器的實現細節，並且可能不會以任何方式引人注目。 – deceze 2012-03-16 02:22:50

性能好處？是的，有一些輕微的好處，如this performance test between jQuery live() and on()中所述。正如@約瑟夫也指出的那樣，兩者的區別在於，實時傳播樹一直向上傳播，而on()只傳遞給最近的共同父代。

在這些測試中，它顯示on()可以超過live()最多4倍。實際上，這可能仍然不值得分拆，但如果你有非常深的html結構和大量的事件觸發器，我想在停止傳播方面的性能差異是值得的。

來源

2012-03-16 02:58:56

事實上，live（）現在因爲這個原因和其他原因而被棄用。 – hexalys 2013-12-29 02:43:18

here's a comparisonon()和live()其中涉及鼓泡和jQuery替換live()的原因之間。 live()的問題在於事件被附加到文檔，導致在樹上漫長的旅行以找到處理程序。你可以用on()做什麼，你可以將處理程序附加到最近的公共父項，從而避免在樹中搜索處理程序的漫長旅程 - 這意味着更快的性能。

但我建議做你自己的基準檢查。

來源

2012-03-16 02:30:19 Joseph

This test顯示早期殺死事件具有性能優勢。（15％-30％）在複雜的DOM上可能會有更大的差異。同樣有趣的是，捕獲事件偵聽器似乎比冒泡事件偵聽器稍微快一些，而不管事件處理後的事件如何。奇怪但有趣;我只在一個瀏覽器上進行了測試，雖然

來源

2012-04-26 14:39:32 Jake

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

回答

相關問題