jQuery Event Bubbling

JavaScript performance comparison

Test case created by Joshua Piccari

Info

Determine the cost of event bubbling in jQuery.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control"><div class="level1"><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div class="level50">
<script>
Benchmark.prototype.setup = function() {
    var $control = $('.control'),
        $level1 = $('.level1'),
        $level50 = $('.level50');
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Control trigger
$control.trigger('click');
pending…
Level 1 trigger
$level1.trigger('click');
pending…
Level 50 trigger
$level50.trigger('click');
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment