speeding up multiple onmouseover events in IE

Question

I have a web page with many (up to 100+) html elements on it. Each one has an onmouseover event registered to fire to do some logic and rendering depending on which element is hovered over.

I am finding that in IE the more onmouseover events that are regitered the longer they take to fire. In Firefox the speed is fine and in Chrome even faster!

Does anyone know a solution to this problem. I thought perhaps registering a single onmousemove event and trying to retrieve the DOM element from the co-ordinates but I'm unsure how to do this or if its just a fudge around the problem.

Answer 1

Attach an onmouseover or mousemove (I think both of these bubble, can't remember) event to the body and when you hover over your actual elements, you can handle what you need to do as it will bubble up to the body where you can handle the element you actually moused over. You can use custom attributes or expando properties of that element to handle what ever you need to do in the mouseover for the specific element.

You should really only be attaching events as you need them and detaching them when you no longer need them. On trivial pages this is probably not required, but in a scenario like yours, it will improve client-side performance. We used to do stuff like this where I worked when we would have thousands of form elements on a page.

My two cents, nickyt