button Click handlers

JavaScript performance comparison

Test case created by Sam

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
    

Preparation code output

<div id="container"> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
delegate
var o = [{ key: "1", value: "one" }, { key: "2", value: "two" }, { key: "3", value: "three" }];
var $container = $("#container");

$.each(o, function() {
  $("<button/>").text(this.key).data("value", this.value).appendTo($container);
});

$(document).on("click", "button", function() {
  console.log($(this).data("value"));
});
pending…
Single direct bindings + closured value
var o = [{ key: "1", value: "one" }, { key: "2", value: "two" }, { key: "3", value: "three" }];
var $container = $("#container");

$.each(o, function() {
  var x = this;

  $("<button/>")
    .text(x.key)
    .click(function() {
      console.log(x.value);
    })
    .appendTo($container);
});
pending…

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

0 Comments