Event Delegation Distance

Benchmark created by Taylor Lovett on

Preparation HTML

<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>

Setup

var element = document.getElementById( 'menu' ).getElementsByTagName( 'li' )[2];

Test runner

Ready to run.

Testing in
TestOps/sec
Catch at #menu
document.getElementById( 'menu' ).addEventListener( 'click', function( event ) {
    if( event.target && event.target.nodeName === 'LI' ) {
        // Event triggered
    }
});

element.click();
ready
Catch at #main
document.getElementById( 'main' ).addEventListener( 'click', function( event ) {
    if( event.target && event.target.nodeName === 'LI' ) {
        // Event triggered
    }
});

element.click();
ready

Revisions

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

  • Revision 1: published by Taylor Lovett on
  • Revision 2: published on