jQuery event delegation - buried elements (v73)

Revision 73 of this benchmark created by Matt on

Description

Comparing performance of adding .click() to anchor tags within 100 list items vs using .on() to listen for click events bubbling up the DOM tree.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul id="list">
<li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li><li class="listitem"><a href="#" class="link-1" /><a href="#" class="link-2"/></li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
no .find
$('#list .link-1').click(function() {
  $(this).append("Test1 ");
});
ready
.find
$('#list').find('.link-1').on('click', function() {
  $(this).append("Test2 ");
});
ready
.delegate
$('#list').delegate('.link-1', 'click', function() {
  $(this).append("Test3 ");
});
ready
.on
$('#list').on('click', '.link-1', function() {
  $(this).append("Test4 ");
});
ready
document .on
$(document).on('click', '.link-1', function() {
  $(this).append("Test5 ");
});
ready
no .find, .on without delegation
$('#list .link-1').on('click', function() {
  $(this).append("Test6 ");
});
ready
document.delegate
$('#list').delegate('.link-1', 'click', function() {
  $(this).append("Test7 ");
});
ready

Revisions

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