事件流和事件委托些许深入研究笔记

相关代码如下：

css代码：
div#div1 {
    position: absolute;
    left: -100px;
    top: 200px;
    background: red;
    width: 100px;
    height: 100px;
}
#div2 {
    width: 10px;  /*div2是相对于div1定位*/
    height: 50px;
    background: black;
    position: absolute;
    right: -10px;
    top: 20px;
    color: white;
    font-size: 5px;
}

html代码：
<div id="div1">
        <div id="div2">分享到</div>
</div>

效果如图：

想要的结果很简单，鼠标移入侧边栏显示，移出时侧边栏消失，结果经测试，当鼠标从红方块移到分享到黑块时，会粗发红块的mouseout和黑块的mouseover事件。
得出结论如下：因为div2已经相对于div1绝对定位了，所以其实已经不是div1的一部分了，鼠标从div1划入div2就会触发mouseout事件