Question

I have two handlers for a mouseover function, I would like to know what the difference is and how to use each one in the most efficient way possible.

Code block one:

$('.test div').mouseover(function() {
                    $(this).stop().animate({
                        left: '100px'
                    }, 550);
});

Code block two:

$('.test').delegate('div', 'mouseover', function() {
                    $(this).stop().animate({
                        left: '100px'
                    }, 550);
                }); 

Thanks in advance 🙂

Answer 1

.delegate() attaches one mouseover event handler per .test element, rather than each .test div match, and works for future <div> elements added inside those .test elements you called .delegate() on.

If you don’t have more than a few <div> elements inside each .test and they’re not changing dynamically (adding via AJAX for example) you can bind directly. In other cases where they’re dynamically changing or there are just many, use .delegate() since the startup cost is much cheaper, and the bubble/selector cost is minuscule.