find().on() vs .on() (v13)

Revision 13 of this benchmark created on

Description

The Difference Between [context].find([selector]).on([event]) and [context].on([event], [selector])

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  function handler() {
    // Do something 
    temp += Math.random() / Math.random() / Math.random();
  }
  var $context = $('#context'),
    $p = $context.find('p'),
    temp;
  ui.benchmarks[0].setup = function() {
    temp = 0;
    $context.on('click', 'p', handler);
  };
  ui.benchmarks[1].setup = function() {
    temp = 0;
    $context.find('p').on('click', handler);
  };
</script>
<div id="context">
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>verylongcontents</p>
  <p>Event test</p>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
.on() in context
$p.trigger('click');
ready
.find().on()
$p.trigger('click');
ready

Revisions

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