Stop event bubbling - increases performance?

Question

If I'm not returning false from an event callback, or using e.stopPropagation feature of jQuery, the event bubbles up the DOM.

In most scenarios I don't care if the event bubbles or not. Like with this DOM structure example:

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

Normally, I don't have multiple nested submit callback like this:

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

Fiddle
That DEMO shows the submit event bubbles to a <div>!
It has no difference to me if I stop the Propagation or just prevent default.

In those scenarios, If I stop the propagation will I gain performance benefits?

It should have no effect whatever, maybe even a hit since the browser bubbles millions of events all the time, it doesn't necessarily bubble them only if there's a listener. — RobG, Mar 16 '12 at 02:11
Why don't you benchmark it? In theory, stopping propagation = less to do = faster. In practice it depends on the implementation details of the browser and will likely be hardly noticeable either way. — deceze, Mar 16 '12 at 02:22

score 7 · Accepted Answer · answered Mar 16 '12 at 02:58

Performance benefits? Yes, there are some slight benefits, as outlined in this performance test between jQuery live() and on(). As @Joseph also noted, the difference between the two is that live propagates all the way up the tree, while on() only goes to the nearest common parent.

In those tests, it is shown that on() can outperform live() by up to 4 times. In practice, that's probably still not worth splitting hairs over, but if you have very deep html structures and lots of event triggers, the performance difference in stopping propagation can be worthwhile, I suppose.

Indeed, live() is now deprecated for that and other reasons. — hexalys, Dec 29 '13 at 02:43

score 5 · Answer 2 · answered Mar 16 '12 at 02:30

here's a comparison between on() and live() which involve bubbling and the reason jQuery replaced live(). the problem with live() was that events were attached to the document, causing a long travel up the tree to find the handler. what you can do with on() is you can attach the handler to the nearest common parent, thus avoiding the long travel up the tree in search for a handler - which means faster performance.

but i suggest doing your own benchmarks to check.

score 3 · Answer 3 · answered Apr 26 '12 at 14:39

This test shows there is a performance advantage to killing the event early. (15%-30%) And there would probably be a bigger difference on a complex DOM. Its also interesting to note that capturing event listeners seem to be slightly faster than bubbling event listeners regardless of what you do with the event after handling it. Strange but interesting; I only tested in one browser though

Stop event bubbling - increases performance?

3 Answers3

Linked