jQuery event delegation (v43)

Revision 43 of this benchmark created on

Preparation HTML

<div style="height: 500px; overflow: auto;">
  <div id="parent">
  </div>
  <div id="parent2">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var $el = $('#parent');
    
    function getHtml(i) {
      return '<div class="clickable" id="' + i + '">Some text<span>more text</span></div>'
    }
    
    var count = 20
    
    var $targets = []
    $el.html('')

Test runner

Ready to run.

Testing in
TestOps/sec
no delegation
for (var i = 0; i < count; i++) {
  $el.append(getHtml(i))
  $targets[i] = $(document.getElementById(i));
  $targets[i].on('click', function() {
    $(this).toggleClass('active');
  });
}
for (var i = 0; i < count; i++) {
  $targets[i].click();
}
ready
with delegation
for (var i = 0; i < count; i++) {
  $el.append(getHtml(i))
  $targets[i] = $(document.getElementById(i));
}
$('#parent2').on('click', '.clickable', function() {
  $(this).toggleClass('active');
});

for (var i = 0; i < count; i++) {
  $targets[i].click();
}
ready

Revisions

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