jQuery vs. Non-jQuery Event Delegation

JavaScript performance comparison

Test case created by Taylor Lovett

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<ul id="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
      
<script>
Benchmark.prototype.setup = function() {
  var element = document.getElementById( 'menu' ).getElementsByTagName( 'li' )[2];

};
</script>

Preparation code output

<ul id="menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Non-jQuery
document.getElementById( 'menu' ).addEventListener( 'click', function( event ) {
    if( event.target && event.target.nodeName === 'LI' ) {
        // Event triggered
    }
});

element.click();
pending…
jQuery
jQuery( '#menu' ).on( 'click', 'li', function() {
    // Event triggered
});

element.click();
pending…

Compare results of other browsers

Revisions

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

0 Comments