Handler Speed: Bind vs addEventListener

JavaScript performance comparison

Revision 4 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.workspace div {
  width: 1px;
  height: 1px;
  float: left;
}
<div id=workspace1 class=workspace></div>
<div id=workspace2 class=workspace></div>
<script>
Benchmark.prototype.setup = function() {
    function simulateClick(element) {
      var event = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true,
        detail: Math.random()
      });
      element.dispatchEvent(event);
    }
    function setColor1(evt){
      evt.target.style.backgroundColor = '#ff0000';
    }
    function setColor2(evt){
      evt.target.style.backgroundColor = '#0000ff';
    }
    function $2(elements) {
      this.elements = element;
    }
    $2.prototype.addEventListener = function(event, handler) {
      for (var i = 0, len = this.elements.length; i < len; i++) {
        this.elements[i].addEventListener(event, handler, false);
      }
    }
    var workspace1 = document.getElementById('workspace1');
    var workspace2 = document.getElementById('workspace2');
    for (var i = 0; i < 100; i++) {
      workspace1.appendChild(document.createElement('div'));
      workspace2.appendChild(document.createElement('div'));
    }
    $(workspace1.children).on('click', setColor1);
    new $2(workspace2.children).addEventListener('click', setColor2);
   
};
</script>

Preparation code output