jquery: bind vs bind-wrapper vs. json (v3)

Revision 3 of this benchmark created by Matthias Krumm on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="foo">Hello</div>

Test runner

Ready to run.

Testing in
TestOps/sec
bind
$("#foo").bind("click", function() {
 // do nothing
});
ready
bind wrapper
$("#foo").click(function() {
 // do nothing
});
ready
json
$("#foo").bind({
 "click": function() {
  // do nothing
 }
});
ready
multi bind 1
$("#foo").bind("click mouseover mouseout", function(event) {
 if (event.type == 'click') {
  // do nothing
 } else if (event.type == 'mouseover') {
  // do nothing
 } else if (event.type == 'mouseout') {
  // do nothing
 }
});
ready
mulit bind 2
$("#foo").bind("click mouseover mouseout", function(event) {
 switch (event.type) {
 case "click":
  // do nothing
  break;
 case "mouseover":
  // do nothing
  break;
 case "mouseout":
 default:
  // do nothing
  break;
 }
});
ready
multi element bind
$("#foo").bind("click", function() {
 // do nothing
});
$("#foo").bind("mouseover", function() {
 // do nothing
});
$("#foo").bind("mouseout", function() {
 // do nothing
});
ready
multi bind json
$("#foo").bind({
 "click": function() {
  // do nothing
 },
 "mouseover": function() {
  // do nothing
 },
 "mouseout": function() {
  // do nothing
 }
});
ready

Revisions

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

  • Revision 3: published by Matthias Krumm on