Parent's mouseout is triggered when mouse enters parent from child

I came across this problem when I found the solution to my question from earlier today (if interested, find it here).

I have a simple structure of divs:

<div id="outer">
    <div id="inner">
        <div id="content"></div>
        <div id="handle">HOVER HERE</div>
    </div>
</div>

There is a mouseout event registered to outer:

$('#outer').on('mouseout', function(event) {
    if (!(event.relatedTarget.id == "outer") &&
        !$(event.relatedTarget).isChildOf("outer")) {
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

(You can see the entire working example here.)

This is the simple version of a menu which has slideDown/slideUp effects.

Now here's my problem:

I totally understand that the mouseout fires on entering a child element (that's the reason for the isChildOf check). What I don't understand is, that the event is fired when I move the mouse from content to outer (inner just centers the actual content while content is the sliding part and has the same width as inner.) This is why I added the check if the relatedTarget is the element itself.

For my understanding, there shouldn't be any mouseout events on the child(ren). However, during good old 'alert-debugging' it turned out that the event seems to fire if the mouse goes from content back to outer, and of course, the isChildOf check failed for outer itself (which is the relatedTarget).

I read about bubbling and capturing again, but I understand it that way, that it is only relevant if more than one eventhandler for a particular event is present.

I would appreciate any explanation or resource which helps understanding the reason for this.

You got this problem because of event bubbling. See your fiddle changed a little with colored borders.

When you move mouse out of content then mouseout event is fired (for leaving content). content doesn't take care of it so it bubbles to his parent which is inner and so on. mouseout event is cought only by outer handler.

See also jquery .mouseout(): This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.