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

Benchmark created on

Preparation HTML

<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.