Mouse很忙——论mouseenter、mouseleave、mouseover、mouseout

翻阅红宝书我们可得：

• mouseenter——在鼠标光标从元素外部首次移动到元素范围之内时触发。
• mouseleave——在元素上方的鼠标光标移动到元素范围之外时触发。
• mouseout——在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。移入的另一个元素可能位于前一个元素的外部，可能是这个元素的子元素。
• mouseover——在鼠标位于一个元素外部，然后用户将其首次移入另一个元素之内时触发。

且书中提到： mouseenter 和 mouseleave 不会冒泡
先提两个概念：
什么是事件冒泡？
IE的事件流叫作事件冒泡，即事件开始时，由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获：
与事件冒泡相反，事件捕获的方法是不太具体的节点更早地接收到事件。事件捕获的用意在于事件到达预定目标前捕获它。

话不多说直接上demo：

简单粗暴5个div，全部绑定mouseenter、mouseleave、mouseout、mouseover四个事件
红色为one（被挡住了）

当我们将鼠标从上方移入two(green)时，我们会看到控制台输出

由此可以得出，

1. mouseover优先于mouseenter触发。
2. 父元素（one）的mouseenter先于子元素触发，说明mouseenter机制不是事件冒泡而是事件捕获。

*此处需要注意的是： 页面加载时，如果鼠标已处于元素区域中，FireFox浏览器下会自动触发一次mouseenter和mouseover；而在chrome下，只有在首次移动鼠标后才会触发这两个事件。

mouseover和mouseenter的区别：
在光标从 one 移入 two 时，会触发：

由此可以得出：
3. 光标移入一个元素或其子元素时，都会触发该元素的mouseover事件。
4. mouseenter事件正常理解（进入元素）即可

mouseout事件：
当光标从five 移入one时：

five（white） 触发了 mouseleave 和 mouseout
two(green) 触发了 mouseout 和 mouseleave（同时移出了two）
one(red) 的 mouseout 和 mouseover （结论3）都被触发了
此处我们可以得出一个粗暴的结论：
5.当一个元素触发 mouseout 的时候，其所有祖先元素都会触发相应的 mouseout 事件

---

另外还有一些小结论：
6.border属于元素（进入/离开border即触发事件）
7.border-radius会影响触发范围（变小）
8.box-shadow不会影响事件触发位置
9.box-sizing也不会

---

文章为个人见解和实践，错误之处欢迎指正。