jQuery event delegation (v87)

Revision 87 of this benchmark created on

Description

Comparing performance of adding .click() to 100 table cells vs using .on() to listen for click events bubbling up the DOM tree.

Preparation HTML

<table>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
no .find
$('table td').click(function(){
  $(this).toggleClass('active');
});
ready
.find
$('table').find('td').on('click', function() {
  $(this).toggleClass('active');
});
ready
.delegate
$('table').delegate('td', 'click', function() {
  $(this).toggleClass('active');
});
ready
.on
$('table').on('click', 'td', function() {
  $(this).toggleClass('active');
});
ready
.on w/o delegation, using e.target
$('table').on('click', function(e) {
  $(e.target).toggleClass('active');
});
ready
.on w/o delegation, using e.target and checking for td
$('table').on('click', function(e) {
  var target = $(e.target);
  if (target.is('td')) {
    target.toggleClass('active');
  }
});
ready
.on each element
$('td').on('click', function(e) {
  $(this).toggleClass('active');
});
ready

Revisions

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