Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="native"></div>
<div id="jquery"></div>
<script>
  Benchmark.prototype.setup = function() {
    if (!Element.prototype.addEventListener) {
      var oListeners = {};
      function runListeners(oEvent) {
        if (!oEvent) { oEvent = window.event; }
        for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
          if (oEvtListeners.aEls[iElId] === this) {
            for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
            break;
          }
        }
      }
      Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
        if (oListeners.hasOwnProperty(sEventType)) {
          var oEvtListeners = oListeners[sEventType];
          for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
            if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
          }
          if (nElIdx === -1) {
            oEvtListeners.aEls.push(this);
            oEvtListeners.aEvts.push([fListener]);
            this["on" + sEventType] = runListeners;
          } else {
            var aElListeners = oEvtListeners.aEvts[nElIdx];
            if (this["on" + sEventType] !== runListeners) {
              aElListeners.splice(0);
              this["on" + sEventType] = runListeners;
            }
            for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
              if (aElListeners[iLstId] === fListener) { return; }
            }     
            aElListeners.push(fListener);
          }
        } else {
          oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
          this["on" + sEventType] = runListeners;
        }
      };
      Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
        if (!oListeners.hasOwnProperty(sEventType)) { return; }
        var oEvtListeners = oListeners[sEventType];
        for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
          if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
        }
        if (nElIdx === -1) { return; }
        for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
          if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
        }
      };
    }
    var createLink = function(){
        var link = document.createElement('a');
        link.href = "#";
        link.innerHTML = "Click Me";
        return link;
    },
        nativeContainer = document.getElementById('native'),
        jqueryContainer = $('#jquery');
    
    for(var i = 0; i < 100; i++){
       nativeContainer.appendChild(createLink());
       jqueryContainer.append($('<a href="#">Click Me</a>'));
    }
    window.testClickListener = function(){
       //
    };
  };

  Benchmark.prototype.teardown = function() {
    [].forEach.call( document.querySelectorAll('#native a'), function(el) {
       el.removeEventListener('click', window.testClickListener, false);
    });
    $('#jquery a').unbind('click');
    document.getElementById('native').innerHTML = "";
    $('#jquery a').remove();
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

$('#jquery a').click(window.testClickListener);

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
   el.addEventListener('click', window.testClickListener, false);
});

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published on 26th April 2012
• Revision 2: published on 20th April 2013

0 comments