DOM事件中mouseover和mouseenter的区别
之前在模仿qq首页的时候,有一个菜单弹出的窗口。
菜单分两部分，一部分是一直显示的，一部分是隐藏的。在鼠标进入到菜单上时，打开隐藏部分的按钮会变色，点击按钮会显示隐藏的菜单部分。
在制作这个过程中遇到了mouseover事件和mouseenter事件的不同，在这记录下来。
菜单简易的表示是这个样子的：
item
item
item
item
鼠标悬浮到菜单上时，按钮变换颜色。点击按钮可以显示隐藏的菜单。鼠标移出菜单区域或者再次点击按钮，可以收回隐藏的菜单。
使用mouseover/mouseout事件
我最开始使用的方法是在菜单元素上绑定mouseover事件，但是这样会出现一个问题，就是菜单中的每个项目在鼠标移入移出时都会产生mouseover和mouseout事件，并且这个事件会向上冒泡被他们的父元素也就是菜单捕获到。
效果大概是这样的：
item
item
item
item
结果就是点击按钮不会展开隐藏的菜单，因为在点击的一瞬间触发了一个鼠标移出按钮的mouseout事件，将隐藏的菜单又瞬间关闭了。
使用mouseenter/mouseleave事件
而使用mouseenter/mouseleave处理事件就可以得到比较好的效果。
item
item
item
item
mouseover/mouseout事件和mouseenter/mouseleave事件的区别
mouseover/mouseout事件会冒泡，且移入/移出的另一个元素可能位于前一个元素的外部，_也可以是这个元素的子元素_。
mouseenter/mouseleave事件不冒泡，且_光标移动到后代元素上不会触发_。
下面这个例子可以很清楚的看出两者的不同：
mouseover触发次数：0
item
mouseenter触发次数：0
item
鼠标滑过其中的item元素可以看到区别。