jQuery On vs Click (v17)

Revision 17 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 amount = 10000;
    var i = 0;
    var htmlString = '';
    while (i < amount) {
      htmlString += '<div class="d1"><a class="a1" href="#"><span class="s1">link</span>/a></div>';
      i++;
    }
    $('#container').html(htmlString);

Test runner

Ready to run.

Testing in
TestOps/sec
click .a1
$('.a1').click(function() {
  alert('hello');
});
ready
on .a1
$('.a1').on('click', function() {
  alert('hello');
});
ready
live .a1
$('.a1').live('click', function() {
  alert('hello');
});
ready
on. #id.class
$('#Container').on('click', '.a1', function() {
  alert('hello');
});
ready
event delegation with on
$('#Container').on('click', function() {
  alert('hello');
});
ready
event delegation with click
$('#Container').click(function() {
  alert('hello');
});
ready

Revisions

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