jQuery event delegation: bind on document & parent table (v62)

Revision 62 of this benchmark created by Raven 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

<style>
td{height:30px;}
.active{
  background-color:red;
}
</style>
<table id="my-table">
  <tr><td>1</td></tr>
</table>
<table id="my-table2">
  <tr><td>2</td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var td1 = $('#my-table').find('td'),
        td2 = $('#my-table2').find('td');
    
    $(document).on('click', '#my-table td', function(){
      $(this).toggleClass('active');
    })
    
    $('#my-table2').on('click', 'td', function(){
      $(this).toggleClass('active');
    })

Test runner

Ready to run.

Testing in
TestOps/sec
on document
td1.trigger('click');
ready
on table
td2.trigger('click');
ready

Revisions

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