mousemove parent vs each child

Benchmark created on

Preparation HTML

<div id="container"></div>

<div id="tooltip"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  // generate a hundo divs
  (function() {
      var div, container = document.getElementById('container');
      for (var i = 1; i <= 100; i++) {
          div = document.createElement('div');
          div.innerText = "Tooltipified " + i;
          container.appendChild(div);
      }
  })();
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
parent
var $tooltip = $('#tooltip'), // store tooltip in reusable variable
    offset = {  // tooltip offset from cursor
        x: 20,
        y: 20
    };
$('#container div').hover(function() {
    $tooltip.show()
}, function() {
    $tooltip.hide();
})
$('#container').mousemove(function(e) {
    $tooltip.css({
        top: e.pageY + offset.y,
        left: e.pageX + offset.x
    }).html(e.pageX + ', ' + e.pageY);
});

// testing
$('#container div').eq(Math.floor(Math.random() * 100)).mouseover().mousemove().mouseout();
 
ready
children
var $tooltip = $('#tooltip'), // store tooltip in reusable variable
    offset = {  // tooltip offset from cursor
        x: 20,
        y: 20
    };
$('#container div').hover(function() {
    $tooltip.show()
}, function() {
    $tooltip.hide();
}).mousemove(function(e) {
    $tooltip.css({
        top: e.pageY + offset.y,
        left: e.pageX + offset.x
    }).html(e.pageX + ', ' + e.pageY);
});

// testing
$('#container div').eq(Math.floor(Math.random() * 100)).mouseover().mousemove().mouseout();
 
ready

Revisions

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