jQuery $.on delegation vs $.on click triggering (v3)

Revision 3 of this benchmark created by Nevraeka on December 5, 2012

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<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="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

Test runner

$('#nav').find('a').on('click', function(e) {
  e.preventDefault();
}).trigger('click');

$('#nav').on('click', 'a', function(e) {
  e.preventDefault();
}).find('a').trigger('click');

Revisions

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

• Revision 1: published by Jasper Howard on January 11, 2012
• Revision 2: published on January 11, 2012
• Revision 3: published by Nevraeka on December 5, 2012
• Revision 4: published on February 4, 2013
• Revision 5: published on February 25, 2013
• Revision 6: published on February 28, 2013
• Revision 7: published on March 1, 2013
• Revision 8: published on March 1, 2013
• Revision 9: published on March 1, 2013
• Revision 10: published on March 1, 2013
• Revision 11: published by Wu_ronin on May 21, 2013
• Revision 12: published on July 8, 2013
• Revision 13: published on July 17, 2013
• Revision 14: published by Eli on July 23, 2013
• Revision 15: published on July 23, 2013
• Revision 16: published by Steve on September 9, 2013
• Revision 17: published by Chris Antaki on September 9, 2013
• Revision 19: published by Milan Adamovsky on September 26, 2013
• Revision 20: published on October 11, 2013
• Revision 21: published on November 1, 2013
• Revision 22: published by J E Carter II on April 3, 2014
• Revision 23: published by e l on April 16, 2014
• Revision 24: published by Jason on May 2, 2014
• Revision 25: published on May 14, 2014
• Revision 26: published on August 9, 2014
• Revision 27: published on October 10, 2014
• Revision 28: published on October 10, 2014
• Revision 29: published on October 10, 2014
• Revision 30: published on October 10, 2014
• Revision 34: published on October 24, 2014
• Revision 39: published on November 12, 2014
• Revision 41: published by danmasta on March 19, 2015
• Revision 42: published on March 28, 2015
• Revision 43: published by jake on April 7, 2015
• Revision 44: published by jake on April 8, 2015
• Revision 45: published on April 13, 2015
• Revision 46: published by Andrey on June 8, 2015
• Revision 47: published by faraaz on June 9, 2015
• Revision 48: published by faraaz on June 9, 2015