jQuery event delegation (v89)

Revision 89 of this benchmark created by eldargab 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 class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr>
 <tr>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr><tr>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr><tr>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr><tr>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr><tr>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr><tr>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr><tr>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr><tr>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr><tr>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
    <td class="test">
    </td>
    <td>
    </td>
  </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

window.tds = document.querySelector('table td');
    window.foo = function() {
      console.log('foo')
    };

Test runner

Ready to run.

Testing in
TestOps/sec
no delegation with closure
var els = window.tds
if (els.length == 0) throw new Error('There is no elements yet!')
for (var i = 0; i < els.length; i++) {
  var listener = (function(i) {
    return function() {
      console.log(i)
    }
  })(i);
  els[i].addEventListener('click', listener)
}
ready
with delegation
$('table').on('click', 'td', function() {
  var $this = $(this);
  if (!$this.hasClass('test')) {
    $this.toggleClass('active');
  }
});
ready
with not
$('table').on('click', 'td:not(.test)', function() {
  $(this).toggleClass('active');
});
ready
no closure
var els = window.tds
if (els.length == 0) throw new Error('There is no elements yet!')
for (var i = 0; i < els.length; i++) {
  els[i].addEventListener('click', foo);
}
ready

Revisions

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