jQuery On vs Click (v19)

Revision 19 of this benchmark created on

Description

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

Preparation HTML

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

Setup

var link_id, link_class, native_id, native_class;

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

  link_id = $('#link-a-475');
  link_class = $('.link-476');
  native_class = document.querySelector('.link-477');
  native_id = document.querySelector('#link-a-478');
};

Test runner

Ready to run.

Testing in
TestOps/sec
click #id
link_id.click(function(e) {
  e.preventDefault();
  return false;
});
ready
on #id
link_id.on('click', function(e) {
  e.preventDefault();
  return false;
});
ready
click .class
link_class.click(function(e) {
e.preventDefault();
  return false;
});
ready
on .class
link_class.on('click', function(e) {
  e.preventDefault();
  return false;
});
ready
native class
native_class.addEventListener('click', function(e){
    e.preventDefault();
    return false;
});
ready
native id
native_id.addEventListener('click', function(e){
    e.preventDefault();
    return false;
});
ready

Revisions

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