jquery(document).on() vs document.addEventListener() (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yuiloader/yuiloader-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1/dojo/dojo.xd.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
<script src="https://www.cinsoft.net/mylib099-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div><div><div><div><div><div><div><div><div><div>
  <div id="foo"></div>
</div></div></div></div></div></div></div></div></div></div>

Setup

max = 1000;

Test runner

Ready to run.

Testing in
TestOps/sec
on()
// async test
var i = 0;

jQuery(document).on('click', function() {
  i++;

  if (i >= max) {
    deferred.resolve()
  }
});

for (var j = 0; j < max; j++) {
  jQuery('#foo').trigger('click');
}
ready
addEventListener
// async test
var i = 0;

document.addEventListener('click', function() {
  i++;

  if (i >= max) {
    deferred.resolve()
  }
});

for (var j = 0; j < max; j++) {
  jQuery('#foo').trigger('click');
}
ready

Revisions

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