jQuery .delegate() and .on() on body or document (v6)

Revision 6 of this benchmark created on

Description

Testing different .delegate methods for body, as well as .on being used as .delegate is deprecated in jQuery now

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="myDiv">
</div>
<script>
  var adiv = $('#myDiv');
  var doc=$(document);
  var docbody = $(document.body);
  var body = $('body');
  var listArray = [],
      tpl = '   <p class="element" id="check_%i"></p>',
      tplFn = function(value) {
      return tpl.replace(/%i/g, value);
      },
      i;

  // loop and create 1000 entries
  for (i = 0; i <= 1000; i++) {
    listArray.push(tplFn(i));
  }
  $('#myDiv').append(listArray.join(''));
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Delegate with Id
adiv.delegate('.element', 'click', $.noop);
ready
Delegate with document
doc.delegate('.element', 'click', $.noop);
ready
Delegate with document.body
docbody.delegate('.element', 'click', $.noop);
ready
Delegate with jQuery body
body.delegate('.element', 'click', $.noop);
ready
On with Id
adiv.on('click', '.element', $.noop);
ready
On with document
doc.on('click', '.element', $.noop);
ready
On with document.body
docbody.on('click', '.element', $.noop);
ready
On with jquery body
body.on('click', '.element', $.noop);
ready

Revisions

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