What is the difference between the mouseover and mouseenter events?

Question

I have always used the mouseover event, but while reading the jquery documentation I found mouseenter. They seem to function exactly the same. Is there a difference between the two, and if so when should I use them? (Also applies for mouseout vs mouseleave)

Answer 1

As is often true with questions like these, Quirksmode has the best answer.

I would imagine that, because one of jQuery's goals is to make things browser agnostic, that using either event name will trigger the same behavior. Edit: thanks to other posts, I now see this is not the case

Answer 2

Mouseenter and mouseleave do not react to event bubbling, while mouseover and mouseout do.

Here's an article that describes the behavior.

Answer 3

Explains it pretty well here

Answer 4

You can try it out here on the jQuery doc page. It's a nice little, interactive demo that makes it very clear and you can actually see for yourself.

In short, you'll notice that a mouse over event occurs on an element when you are over it - coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from the parent element to the element.