la situación es más o menos la siguiente. aunque tu no lo veas de forma explicita, el navegador siempre esta generando eventos. en cada pulsación de tecla o movida del puntero, siempre ocurre un evento. sin embargo, uno no lo percibe porque no hay ningún listener registrado para capturar el evento. tu situación básicamente se debe a dos factores: los elementos siempre inician los eventos mouseout y mouseover, y por la forma en como "viaja" el objeto Event.
posiblemente la forma que tu lo estas visualizando es algo como "si el elemento esta dentro de otro, entonces no debe volver a iniciarse el evento para el elemento padre". pero no ocurre así. los eventos viajan desde la jerarquía DOM más alta (usualmente Window) hasta llegar al elemento que lo inició pero recorriendo el camino a traves del DOM. es decir, Window, Document, HtmlElement, BodyElement, y así sucesivamente hasta llegar al elemento. a esta fase se le denomina la fase
capture. luego regresa por el mismo camino desde el elemento que lo inició hasta Window, y se le denomina como la fase
bubble. si en ese camino que recorre existe algún listener registrado, este captura el objeto Event y determina si es del mismo tipo que el listener (click, mouseover, mouseout, keyup, keydown, etc.) y que la fase en que se encuentra el objeto sea el mismo. si coincide, entonces se lo pasa al handler para procesarse.
Código:
<style>
div, p{ padding: 0.5em; background-color: rgba(204,204,204,.25); border: thin solid #ccc; }
</style>
<div onmouseover="console.log('listener: ' + event.currentTarget.nodeName);">division <p onmouseover="console.log('listener: '+ event.currentTarget.nodeName);">paragraph</p> end</div>
en el ejemplo anterior, cuando mueves el puntero de P a DIV, debes ver en la consola se crea dos registro: "listener P" y "listener DIV". la razón es por como antes explique. cuando P inicia el evento onmouseout, el navegador inicializa un objeto Event que va desde Window hasta P, pero ninguno de los listener lo procesan porque ambos son de tipo
bubble. cuando finalmente el objeto Event cambia a
bubble, P lo captura y lo procesa. cuando P termina lo regresa al flujo normal. como DIV está en ese camino que recorre el objeto Event, entonces DIV también lo captura y lo procesa. así sucecivamente con el resto de los listener si hubieran más registrados en ese camino recorrido.
este principio básico aplica para la mayoría de todos los tipos de eventos. te recomendaria que busques material sobre el modelo de eventos en navegadores. más que nada para que tengas una idea de como funciona y que cosas puedes hacer. por ejemplo, otra solución podria ser no propagar el objeto Event. es decir, que el listener lo destruye o no lo devuelve al flujo normal, y como resultado el próximo listener no captura el objeto.