mouseenter、mouseover；mouseleave、mouseout的区别
mouseenter、mouseover；mouseleave、mouseout的区别
在jQuery里面，鼠标事件有两对比较容易混淆的。
- mouseenter和mouseover
- mouseleave和mouseout
既然容易混淆，把这4个重新组合一下，变成 mouseover/mouseout VS mouseenter/mouseleave
这样是不是清晰多了？至少样子上是。
mouseover/mouseout在原生JS中一直都是有的，也就是onmouseover和onmouseout事件，而且，特大好消息的是，曾经只有IE支持的onmouseenter和onmouseleave事件现在已经来到了Chrome和Firefox中：
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 30 | 10.0 (10) | All | 11.10 | Not supported |
要说区别，非常简单：mouseover/mouseout的事件会冒泡（event bubbling），也就是说，假设把mouseover/mouseout事件绑定到了父元素，那么它其中的任何子元素只要发生了mouseover/mouseout事件，同时也会触发父元素的mouseover/mouseout事件，父元素的父元素也会触发……然后一直向上，就像池塘的气泡一样一直往上冒。
而mouseenter/mouseleave不会发生事件冒泡，属于传统思维上的鼠标进出。 通过下面的demo就可以清晰看到区别。（改编自jQuery的官方api文档的范例）
如图所示，即使在子元素内部，从一个p元素移出来，移到了子元素空白区域，这样也会触发子元素的mouseout事件，并且同时也会触发父元素的mouseout。我的理解是即使是空白区域，也是一块新地方，并且属于子元素，所以就触发了它的mouseout事件。
mouseout、mouseover就是一举一动都会产生很多事情的感觉，既然主流浏览器都支持mouseenter/mouseleave了，也不用像jQuery一样用代码来模拟了。不过Safari...话说有公司要求必须Safari正常使用的么？ 最后感叹一句，IE在这件事上还挺先进的，IE6就支持mouseenter/mouseleave了。