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?
Gopherkhan :
So, I know this question is long dead, but I figured I might as well answer with a way to do this.\n\nWith 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.\n\nFor example:\n\n<div class=\"list-container\">\n <ul class=\"dynamic-list-content\">\n <!-- actual list elements provided by js -->\n </ul>\n</div>\n\n\nThen:\n\nvar listContainer = document.querySelector('.list-container');\nlistContainer.addEventListener('mousemove', function(e) {\n var hovered = listContainer.querySelector('li:hover');\n // do something with the hovered element here.\n});\n\n\nNote 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.",
2016-01-06T06:16:38
Luke Whyte :
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:\n\nEvent 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.\n\nMore specifically, here are times when event delegation is required or advantageous:\n\n\nWhen 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.\nWhen 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.\nWhen you're trying to capture (at a higher level in your document) events that occur on any element in the document.\nWhen your design is explicitly using event bubbling and stopPropagation() to solve some problem or feature in your page.\n\n\nOriginal answer by @jfriend00",
2014-02-19T21:30:11