How do we make use of `mouseover` and `mouseout` event?

Question

As JQuery document says, I have converted many lines mouseover to mouseenter because it does not fire more than once.

http://api.jquery.com/mouseover/

mouseover fires when the pointer moves into the child element as well

mouseenter fires only when the pointer moves into the bound element.

Even hover event works as mouseenter and mouseleave, not as mouseover and mouseout.

It makes me wonder why there is mouseover event if mouseenter can do it all.

For me, mouseover gets fired unpredictably when you move mouse around on an element. It seems really dependent on the depth of child elements.

Is there a good use-case of mouseover and mouseout, which needs to fire multiple times?

`mouseover` and `mouseout` are part of the official W3C standard and the other two are (useful) inventions of Microsoft. They might have emerged at the same time, which would explain why there are two ways now and both of them might be useful in certain situations. Now, I understand that you want to know *which* situations. I just wanted to give a brief overview of their origin. — Felix Kling, Feb 21 '13 at 20:24
possible duplicate of [What is the difference between the mouseover and mouseenter events?](http://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events) — Bergi, Feb 21 '13 at 20:28
@Bergi I do not think this question matches that duplicate because this specific question is asking for a use-case for `mouseover`/`mouseout` while already understanding the difference from `mouseenter`/`mouseleave` — Explosion Pills, Feb 21 '13 at 20:32
@Bergi, I understand the difference, and am just curious of use-cases. — allenhwkim, Feb 21 '13 at 21:17

Explosion Pills · Answer 1 · 2013-02-21T20:36:32.797

That I know of, there is no use case for mouseover/mouseout at all. The only reason they exist is because these events are triggered by browsers because they are in the standard DOM event list. mouseenter and mouseleave are not standard events, but they are jQuery-specific constructs.

I suppose a use case would be if you wanted the event to trigger when moving the mouse over and out of the children of the element that the events are bound to. I can't think of anything specific, but at least this functionality is available. If only mouseenter/mouseleave existed, you wouldn't have a choice in the matter.

From http://code.jquery.com/jquery-1.9.1.js:

jQuery.each({
    mouseenter: "mouseover",
    mouseleave: "mouseout"
}, function( orig, fix ) {
    /* content snipped */

Speculation: the reason why the creators of jQuery created the mouseenter and mouseleave non-standard events is because their behavior works as you would expect the mouseover/mouseout events to work (i.e. without regard for descendants).

`mouseenter` and `mouseleave` are from IE. – Felix Kling Feb 21 '13 at 20:27 — Felix Kling, Feb 21 '13 at 20:27
Do `enter`/`leave` bubble in jQuery? – Bergi Feb 21 '13 at 20:30 — Bergi, Feb 21 '13 at 20:30

score -1 · Answer 2 · answered Feb 21 '13 at 20:22

-1

Because the event contains coordinates of cursor. So if you need to track mouse coordinates under the target, you have to use 'mouseover'

answered Feb 21 '13 at 20:22

Serge

665
1
4
15

1

I thought that was `mousemove` – allenhwkim Feb 21 '13 at 20:23

How do we make use of `mouseover` and `mouseout` event?

2 Answers2