CODEWITHSUNDEEP
javascripthtmlperformancedomdom-events
Jeffrey
Jeffrey

Reputation: 4506

HTML DOM events

I have a browser tree as below. Each node is a div element with individual id. I want to change the style when the mouse hovers over the node. And do something when the user left-clicks or right-clicks the node. enter image description here

Question1: Some documents say there are performance issues with the :hover selector. So I listen for the mouseover and mouseout events instead. Is this manner recommended?

To implement my requirements, I want to listen for the mouseover, mouseout, click and contextmenu events of each node. I have two solutions. The first is bind the event handler to each node. The second is only bind the event handler to the root node. When the event is bubbled to the root node, the handler is called.

Question 2: Which performance is better about the two solutions?

Upvotes: 0

Views: 401

Answers (1)

Lee Kowalkowski
Lee Kowalkowski

Reputation: 11751

CSS will generally outperform JavaScript for hover, it's more native, and it's by far easier to maintain (performance is not limited to client technology, what about the performance of the human maintaining the code?).

Simulating hover effects in JavaScript is sometimes necessary for support in older browsers, depending on the HTML used (if you use :hover on links it's always fine).

Event bubbling will perform better than multiple event handler instances. http://icant.co.uk/sandbox/eventdelegation/

You should never use hover to expand/collapse new content however, that's just inaccessible, expand/collapse should always be triggered from a click event on a link element (it doesn't sound like you are, by the way).

Upvotes: 1

Related Questions