如何理解事件mouseenter的不冒泡和mouseover的冒泡

Question

代码如下：

<div style = "width:200px;height:200px;padding:30px;background-color:red">
        <div id="d1" style = "width:100px;height:100px;background-color:orange;">
            <div id="d2" style = "width:75px;height:75px;background-color:yellow;">
                <div id="d3" style = "width:50px;height:50px;background-color:blue">
                </div>
            </div>
        </div>
</div>

几个嵌套的div，对每个div添加mouseenter监听器。

function fun1(){
                console.log(event.currentTarget.id);
            }
d1.addEventListener("click",fun1,false);
d2.addEventListener("click",fun1,false);
d3.addEventListener("click",fun1,false);

当鼠标移到最里面的d3时，控制台依次输出
d1
d2
d3
意思应该就是，先在外层div触发，再依次在子div触发。

如果从d3（最内层）移到d2，由于已经在一开始触发d2的mouseenter，因此此时也不会触发d2的mouseenter。

而从d1（最外层）移到d2，由于已经在d1内，就只触发d2的mouseenter。

mouseover定义为从元素外部第一次移动到元素边界触发。

把事件监听器改成mouseover后，当鼠标从左侧移到d3，依次输出：
d3
d2
d1
也就是从d3冒泡到d1了。

难道是d3和d2，d1的边界重合了，因此只触发d3的mouseover然后冒泡吗？如果按照mouseenter的理解，它也进入了d2和d1的边界吧。

而从d3移到d2，会依次输出：
d2
d1
也就是从d2冒泡到d1。

上面的操作相当于移出了d3的边界吧，这时候触发了d2的mouseover，这是说在d3的边界也就是d2的边界吗？

Answer 1

只能先记着

mouseover会在进入元素或其子元素时触发
mouseenter只在进入元素时触发