jQuery On vs Click (v18)

Revision 18 of this benchmark created on

Description

.on('click', ... vs .click(...

Preparation HTML

<div class="Container">
 
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var input_id, input_class;

Benchmark.prototype.setup = function() {
  var content = '';
  var template = function(i){return };
  
  for (var i = 0, total = 10000; i < total; i++){
    content += '<div id="link-div-'+i+'"><a href="#" '+(i%2)&&'id="link-a-'+i+'"'+' class="link link-'+i+'">Link-'+i+'</a></div>';
  }
  
  $('.Container').html(content);

  input_id = $('#link-div-7478');
  input_class = $('#link-div-4478');
};

Test runner

Ready to run.

Testing in
TestOps/sec
click #id
input_id.click(function() {
  alert('hello');
});
ready
on #id
input_id.on('click', function() {
  alert('hello');
});
ready
click .class
input_class.click(function() {
  alert('hello');
});
ready
on .class
input_class.on('click', function() {
  alert('hello');
});
ready

Revisions

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