jQuery on vs addEventListener (v8)

Revision 8 of this benchmark created by Kristoffer Snabb on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="target" class="target"></div>

Setup

$.id = function(id){return $(document.getElementById(id));};
    function targetFunc () { void(0) };

Test runner

Ready to run.

Testing in
TestOps/sec
Inefficient jQuery solution
$('#target').on('click',targetFunc);
$('#target').off('click',targetFunc);
ready
Slightly improved jQuery solution
$.id('target').on('click',targetFunc);
$.id('target').off('click',targetFunc);
ready
Native solution
$('#target').get(0).addEventListener('click',targetFunc,false);
$('#target').get(0).removeEventListener('click',targetFunc,false);
ready
Slightly Improved Native solution
var target = document.getElementById('target');
target.addEventListener('click',targetFunc,false);
target.removeEventListener('click',targetFunc,false);
ready
Native Solution with class
var target = document.getElementsByClassName('target')[0];
target.addEventListener('click',targetFunc,false);
target.removeEventListener('click',targetFunc,false);
ready
Jquery solution with class
$(".target").on("click",targetFunc);
ready

Revisions

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