Events - mouseover and mouseout

mouseover and mouseout

The mouseover event fires when the user moves the mouse onto an element. The mouseout event fires when the user moves the mouse out of an element. Unfortunately these events bubble up.

mouseover: Fires when the user moves the mouse over the element you registered the event on or one of its descendants.
mouseout: Fires when the user moves the mouse out of the element you registered the event on or one of its descendants.
mouseenter and mouseleave: Similar to mouseover and mouseout, but these events do not bubble.

In general you want to use mouseenter and mouseleave instead of mouseover and mouseout. Unfortunately Firefox, Chrome, and Safari still haven’t copied this brilliant Microsoft invention, that has even made it to the spec. Come on, guys!

Test	IE 5.5	IE 6	IE 7	IE8	IE9	IE10 pr2	FF 7.0 Win	FF 6.1 Mac	Saf 5.1 Win	Saf 5.1 Mac	Chrome 14 Win	Chrome 13 Mac	Opera 11.51 Win	Opera 11.51 Mac
On the window	No				Yes		Yes		Yes		Yes		Yes
On the window	Are these events available on the window? [an error occurred while processing this directive]
On the document	Yes						Yes		Yes		Yes		Yes
On the document	Are these events available on the document?
On any element	Yes	Almost	Yes				Yes		Yes		Yes		Yes
On any element	Are these events available on any element, including form fields and links? In IE6 there’s a bug with the padding-bottom and border-bottom of elements (such as my nested test). See this bug report.
Event bubbling for mouseover and mouseout	Yes						Yes		Yes		Yes		Yes
Event bubbling for mouseover and mouseout	The mouseover and mouseout events should bubble up.
Cancel bubble	Yes						Yes		Yes		Yes		Yes
Cancel bubble
Test	IE 5.5	IE 6	IE 7	IE8	IE9	IE10 pr2	FF 7.0 Win	FF 6.1 Mac	Saf 5.1 Win	Saf 5.1 Mac	Chrome 14 Win	Chrome 13 Mac	Opera 11.51 Win	Opera 11.51 Mac
mouseenter and mouseleave	Yes						No		No		No		Yes
mouseenter and mouseleave	Are these events supported? They’re in the spec nowadays.
Event order mouseover mouseenter mouseout mouseleave	Yes						Untestable		Untestable		Untestable		Yes
Event order mouseover mouseenter mouseout mouseleave	Is the event order correct?
Event bubbling for mouseenter and mouseleave “No” is the correct answer	No						Untestable		Untestable		Untestable		No
	The mouseenter and mouseleave events should not bubble up. That’s the whole point of having them.
Test	IE 5.5	IE 6	IE 7	IE8	IE9	IE10 pr2	FF 7.0 Win	FF 6.1 Mac	Saf 5.1 Win	Saf 5.1 Mac	Chrome 14 Win	Chrome 13 Mac	Opera 11.51 Win	Opera 11.51 Mac