mouseout() vs mouseleave() in jQuery

Difference between mouseout and mouseleave in jQuery

S.No	mouseout()	mouseleave()
1	Does it bubble the event ? By deault, in mouseout there is no event bubbling.	Does it bubble the event ? In mouseleave the events bubble by default.

Example:

Consider the following example,

1. When we point the cursor of the mouse over the red area where the div is and there is an attached event listener for mouseout of that div, something like divElement.onmouseout = doSomething;, where this is of course pseudo code, and
2. When we point the mouse over the a-tag  yet again the mouseout of the div doesn’t fire.

That’s because of the event bubbling in JavaScript where if one element receives the event, in this case the a tag has the mouse over it, the event bubbles to the parent element and then to the parent of the parent and so forth to the document root.

Why $.mouseout does not bubble the event ?

In JQuery the mouseout doesn’t bubble and there comes the problem with the schema from the image. If we have,

$('div').mouseout();

and we point to the a-tag even it is inside the div, the mouseout event fires. Now this seems strange. Our mouse is over that element but jQuery says us that it is out!

What is the solution for event bubbling to take place automatically ? OR

Which event can be used to handle the above scenario ? OR

Which event can replace the mouseout to handle the above scenario?

This is easy and mouseleave helps us enter with the mouse over the a-tag and still the mouseleave event doesn’t fire. But if we move the mouse outside the div and we point the body, now this seems normal.

Reference:

http://www.stoimen.com/blog/2009/10/08/jquery-the-difference-between-mouseout-and-mouseleave/