mouseenter和mouseover

【宝宝懵逼系列】

唉，这两个坑爹的东西，特别想说只可意会不可言传，我严重怀疑自己能不能解释明白。。。

首先，宝宝试了两个浏览器：最爱的Chrome和FireFox，结果是：

enter是捕获阶段执行，over是冒泡阶段执行

也就是说对于下面这种结构，

使用mouseenter，鼠标只移入div3（但看上去没移入div2和div1）的时候，控制台输出

使用mouseover，鼠标只移入div3（但看上去没移入div2和div1）的时候，控制台输出

2. 从div1 => div2 => div3 => div2 => div1（此过程无理数始终不离开div1）输出内容不同：

mouseenter的过程：

过程是酱紫的：
移入蓝色的时候输出“div1 div2 div3”,从蓝色移入橙色，不输出，从橙色移入绿色，不输出，
返回来，从绿色移入橙色，只输出“div2”，从橙色移入蓝色，只输出“div3”
mouseover的过程：

过程是酱紫的：
移入蓝色的时候输出“div3 div2 div1”,从蓝色移入橙色，输出“div2 div1”，从橙色移入绿色，输出“div1”，
返回来，从绿色移入橙色，输出“div2 div1”，从橙色移入蓝色，输出“div3 div2 div1”。

总结就是两句话：

1. 不论鼠标指针穿过备选元素或其子元素，都会触发“mouseover”，对应mouseout；
2. 只有鼠标指针划过备选元素时，才会触发mouseenter事件，对应mouseleave。