.call, .apply & .bind with .addEventListener & .click

Benchmark created on June 26, 2011

Preparation HTML

<button id="testbutton1">
  Text
</button>
<button id="testbutton2">
  Text
</button>
<button id="testbutton3">
  Text
</button>
<button id="testbutton4">
  Text
</button>
<button id="testbutton5">
  Text
</button>
<script>
  var test = {
    // n: 1,
    a: document.getElementById('testbutton1'),
    b: document.getElementById('testbutton2'),
    c: document.getElementById('testbutton3'),
    d: document.getElementById('testbutton4'),
    e: document.getElementById('testbutton5'),
    init: function() {
      var that = this;
  
      this.Call = function(m) {
        var o = function(e) {
            m.call(that, e);
            };
        return o;
      };
      this.Apply = function(m) {
        var o = function(e) {
            m.apply(that, e);
            };
        return o;
      };
      this.Call2 = function(m) {
        var o = function(e) {
            that[m].call(that, e);
            };
        return o;
      };
      this.Apply2 = function(m) {
        var o = function(e) {
            that[m].apply(that, e);
            };
        return o;
      };
  
      this.a.addEventListener('click', this.Call(this.evt), false);
      this.b.addEventListener('click', this.Apply(this.evt), false);
      this.c.addEventListener('click', this.Call2('evt'), false);
      this.d.addEventListener('click', this.Apply2('evt'), false);
      this.e.addEventListener('click', this.evt.bind(this), false);
    },
    evt: function(evt) {
      // console.log(this.n);
      return;
    }
  };
  
  test.init();
</script>

Test runner

test.a.click();

test.b.click();

test.c.click();

test.d.click();

test.e.click();

Revisions

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

• Revision 1: published on June 26, 2011