jQuery event delegation - buried elements

JavaScript performance comparison

Revision 72 of this test case created by Steve Costello

Info

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 code

<script src="//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>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
no .find
$('#list .link-1').click(function() {
  $(this).append("Test1 ");
});
pending…
.find
$('#list').find('.link-1').on('click', function() {
  $(this).append("Test2 ");
});
pending…
.delegate
$('#list').delegate('.link-1', 'click', function() {
  $(this).append("Test3 ");
});
pending…
.on
$('#list').on('click', '.link-1', function() {
  $(this).append("Test4 ");
});
pending…
document .on
$(document).on('click', '.link-1', function() {
  $(this).append("Test5 ");
});
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. Here’s a list of current revisions for this page:

0 comments

Add a comment