fastest click binding

JavaScript performance comparison

Test case created by

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="https://code.jquery.com/jquery.min.js"></script>

    

Preparation code output

<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>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
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…

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.

0 Comments

Old Heading Text

Change Heading Text

Old Heading Text

Change Heading Text

Old Heading Text

Change Heading Text