Event delegation on mouseover

Question

When creating click events, I do my best to bind them only once – generally to a parent shared by all the nodes expected to trigger the event. I'm curious, however, what the best practice is with mouseover events: Does it still make sense to bind an event to a parent when the result would be the constant firing of the event on mouseover? What's the most efficient practice?

Answer 1

In order to provide some closure to this question, I'm going to paraphrase/quote some relevant notes from this answer: 'Should all jquery events be bound to $(document)?', which was referenced above by @Faust:

Event delegation does not always make your code faster. Unless you're binding to dynamic elements or a ton of elements, you should bind event handlers directly to the objects where the event happens as this will generally be more efficient.

More specifically, here are times when event delegation is required or advantageous:

• When the objects you are capturing events on are dynamically created/removed and you still want to capture events on them without having to explicitly rebind event handlers every time you create a new one.
• When you have lots of objects that all want the exact same event handler (where lots is at least hundreds). In this case, it may be more efficient at setup time to bind one delegated event handler rather than hundreds or more direct event handlers. Note, delegated event handling is always less efficient at run-time than direct event handlers.
• When you're trying to capture (at a higher level in your document) events that occur on any element in the document.
• When your design is explicitly using event bubbling and stopPropagation() to solve some problem or feature in your page.

Original answer by @jfriend00

Answer 2

So, I know this question is long dead, but I figured I might as well answer with a way to do this.

With dynamic-elements, you can establish a mousemove listener on the parent div/container, and then query within the div for elements with a :hover attribute.

For example:

<div class="list-container">
   <ul class="dynamic-list-content">
     <!-- actual list elements provided by js -->
   </ul>
</div>

Then:

var listContainer = document.querySelector('.list-container');
listContainer.addEventListener('mousemove', function(e) {
  var hovered = listContainer.querySelector('li:hover');
  // do something with the hovered element here.
});

Note that (as you mentioned) this will fire a lot, but no more than if you added a mousemove event listener to the individual entries. And you could debounce this a bit, using data-attributes, unique ids, etc. From my tests though, it's pretty performant in Chrome.

Answer 3

you can also stop the propagation of events. More info here: http://api.jquery.com/event.stoppropagation/ and here event.preventDefault() vs. return false