Event Delegation Distance

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>

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

};
</script>

Preparation code output

<section id="main"> <div class="content"> <div class="container"> <div></div> <div></div> <ul id="menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> </div> </section>

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
Catch at #menu
document.getElementById( 'menu' ).addEventListener( 'click', function( event ) {
    if( event.target && event.target.nodeName === 'LI' ) {
        // Event triggered
    }
});

element.click();
pending…
Catch at #main
document.getElementById( 'main' ).addEventListener( 'click', function( event ) {
    if( event.target && event.target.nodeName === 'LI' ) {
        // 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