Event Delegation vs. Event binding

Benchmark created by gabel on

Description

jQuery event delegation vs event binding

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul id="toolbar">
  <li data-function="copy">copy</li>
  <li data-function="paste">paste</li>
  <li data-function="cut">cut</li>
</ul>
<script>
  function action(type) {
   for (var i = 0; i < 1000; i++) {
  
   }
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
event delegation
$("#toolbar").delegate("li", "click", function() {
 action(jQuery(this).data('function'));
});
jQuery("#toolbar li").each(function() {
 jQuery(this).trigger('click');
});
ready
event binding
$("#toolbar li").click(function() {
 action(jQuery(this).data('function'));
});
jQuery("#toolbar li").each(function() {
 jQuery(this).trigger('click');
});
ready

Revisions

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