【宝宝懵逼系列】
唉，这两个坑爹的东西，特别想说只可意会不可言传，我严重怀疑自己能不能解释明白。。。
首先，宝宝试了两个浏览器：最爱的Chrome和FireFox，结果是：
enter是捕获阶段执行，over是冒泡阶段执行
也就是说对于下面这种结构，
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
使用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”。
总结就是两句话：
- 不论鼠标指针穿过备选元素或其子元素，都会触发“mouseover”，对应mouseout；
- 只有鼠标指针划过备选元素时，才会触发mouseenter事件，对应mouseleave。
网友评论