jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

Delegated vs Non-delegated Click Event Handlers (v44)

Revision 44 of this benchmark created by Sampath lankapura on July 29, 2012

Description

Determining whether it is faster to use click(), bind(), delegate(), or live() on click events.

This version actually runs the event handlers, rather than simply binding them.

Preparation HTML

<div id="extra-dom-content">
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>
<a href="#">Home</a>
<ul id="nav">
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="bind">DelegateLink</a>
  </li>
  <li>
    <a href="#" class="delegate">NonDelegateLink</a>
  </li>
  <li>
    <a href="#" class="live">NonDelegateLink</a>
  </li>

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

Setup

function fireEvent(element) {
    element.trigger('click');
    }
    
    $(document).on('click', '.live', function(e) {
    });
    
    $('.bind').on('click', function(e) {
    });
    
    $('#nav').on('click', '.delegate', function(e) {
    });
    
    var bind = $('.bind');
    var live = $('.live');
    var delegate = $('.delegate');

Test runner

Ready to run.

Testing in
Test		Ops/sec
Delegated	`fireEvent(delegate);`	ready
Live	`fireEvent(live);`	ready
Bind	`fireEvent(bind);`	ready

Revisions

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

Revision 1: published by Trevor Davis on November 15, 2010
Revision 3: published by Kyle A. Matheny on November 16, 2010
Revision 4: published on November 17, 2010
Revision 6: published on March 8, 2011
Revision 10: published on May 15, 2011
Revision 11: published on May 16, 2011
Revision 12: published on May 31, 2011
Revision 14: published on July 6, 2011
Revision 15: published on July 11, 2011
Revision 16: published by Mikael Eliasson on July 11, 2011
Revision 17: published on July 24, 2011
Revision 18: published on July 25, 2011
Revision 19: published on August 1, 2011
Revision 20: published on August 5, 2011
Revision 21: published by Shane on August 12, 2011
Revision 22: published on August 22, 2011
Revision 23: published on August 30, 2011
Revision 27: published on December 16, 2011
Revision 28: published on December 16, 2011
Revision 29: published by Jasper on December 23, 2011
Revision 30: published by Mark Smits on January 2, 2012
Revision 31: published on January 4, 2012
Revision 32: published by Mark Smits on January 5, 2012
Revision 33: published on January 15, 2012
Revision 34: published by Guillaume on January 15, 2012
Revision 36: published on February 15, 2012
Revision 37: published on February 16, 2012
Revision 38: published on February 17, 2012
Revision 39: published by Randen on February 22, 2012
Revision 40: published on March 13, 2012
Revision 41: published on March 13, 2012
Revision 42: published by tec27 on March 15, 2012
Revision 43: published by Dmitry on June 28, 2012
Revision 44: published by Sampath lankapura on July 29, 2012
Revision 45: published on August 22, 2012
Revision 47: published on August 22, 2012
Revision 48: published on August 22, 2012
Revision 50: published by Can on September 22, 2012
Revision 51: published by CyberDenix on September 23, 2012
Revision 52: published on September 26, 2012
Revision 53: published on October 4, 2012