关于mouseover,mouseout 和 mouseenter,mouseleave

mouseover和mouseenter区别

做了个测试。

mouseover

当鼠标进入元素时候触发事件。

进入子元素时，又触发了一次事件

鼠标离开子元素回到事件元素的时候又触发一次。

也就是说当鼠标移入元素或其子元素都会触发事件，支持冒泡。

mouseenter

而mouseenter事件则不支持冒泡，当鼠标进入元素的时候触发（不包含子元素）

mouseout和mouseleave区别

mouseout

当鼠标从事件元素移到其子元素的时候触发了。

官方上对mouseout的描述是当光标从一个元素到另一个元素时触发，也就包括外部到父元素，以及父元素到子元素。

实际上，mouseover和mouseout 都是从一个元素的边界之内把光标移动到另一个元素的边界之内触发的，只是它们的目标不同。

当然，移出去也一样会触发。

值得注意的是

如果同时设置mouseover和mouseout

从事件元素移动到其子元素的时候会同时触发mouseover和mouseout事件
颜色没有发生变化，

而从子元素移出去的时候

同样触发了两次，颜色却没有变化。
这是因为光标在事件元素内部元素之间切换的时候首先触发mouseout事件，其次再触发mouseover事件，所以颜色被覆盖了，没有发生变化。

mouseleave

而mouseleave只在脱离事件元素时才生效。