The difference between rollOver and mouseOver
Ever wonder what the difference is between rollOver and rollOut vs mouseOver and mouseOut? Well, I didn’t. Honestly, I never really gave it any thought. I got used to using the mouseOver/mouseOut and didn’t think about it again. Until, I had a problem that could only be solved by using the rollOver/rollOut events.
Move your mouse over the two <Panels> below. The panel on the left is using the roll events to change the style. Notice that the panel style doesn’t change as you move over the Button. However, the panel on the right is using the mouse events and it flickers when the mouse moves over the edge of the Button. That’s because the mouseOut event fires and then the mouseOver event fires again.
| view source |
The basic difference is that rollOut checks to see if the mouse is over the component that is listening for the event or a child of the component. mouseOut doesn’t do that so it fires causing the style to change before it can be corrected by mouseOver firing again.
Daniel
