jQuery event delegation (v39)

Revision 39 of this benchmark created on

Description

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

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> 
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery click()
$('table td').click(function(){
  $(this).toggleClass('active');
});
ready
native external
function toggleFunction(){
  $(this).toggleClass('active');
}

var element = document.getElementsByTagName("td");

for(var i=element.length; i--;){
   element[i].onclick=toggleFunction;
}
ready
jQuery .on
$('table').on('click', 'td', function() {
  $(this).toggleClass('active');
});
ready
native .on
document.getElementsByTagName("table")[0].onclick=function(event){
    var e = event || window.event,
    target = (typeof e.target != 'undefined') ? e.target : e.srcElement;
    if(target.nodeName=="TD"){
        $(target).toggleClass('active');
    }
}
ready
jQuery external
function toggleFunction(){
  $(this).toggleClass('active');
}

$('table td').click(toggleFunction);
ready
native click
var element = document.getElementsByTagName("td");

for(var i=element.length; i--;){
   (function(){
   element[i].onclick=function(){$(element[i]).toggleClass('active');};
   })();
}
ready

Revisions

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