fastest click binding

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<div id="test">
  <div class="subdivider">
    <h1 class="heading">Old Heading Text</h1>
    <a class="change-heading-text" href="javascript://">Change Heading Text</a>
  </div>
  <div class="subdivider">
    <h1 class="heading">Old Heading Text</h1>
    <a class="change-heading-text" href="javascript://">Change Heading Text</a>
  </div>
  <div class="subdivider">
    <h1 class="heading">Old Heading Text</h1>
    <a class="change-heading-text" href="javascript://">Change Heading Text</a>
  </div>
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
 

Preparation code output

Old Heading Text

Change Heading Text

Old Heading Text

Change Heading Text

Old Heading Text

Change Heading Text

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
click method
$(function(){
  $('.change-heading-test').click(function(){
    $(this).closest('.subdivider').find('.heading')[0].innerText = "New Heading Text";
  });
});
pending…
live method
$(function(){
  $('.change-heading-test').live('click', function(){
    $(this).closest('.subdivider').find('.heading')[0].innerText = "New Heading Text";
  });
});
pending…
bind method
$(function(){
  $('.change-heading-test').bind('click', function(){
    $(this).closest('.subdivider').find('.heading')[0].innerText = "New Heading Text";
  });
});
pending…
delegate method
$(function(){
  $('.subdivider').delegate('.change-heading-text', 'click', function(){
    $(this).closest('.subdivider').find('.heading')[0].innerText = "New Heading Text";
  });
});
pending…
on method
$(function(){
  $('.subdivider').on('click', '.change-heading-text', function(){
    $(this).closest('.subdivider').find('.heading')[0].innerText = "New Heading Text";
  });
});
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