onmoseover 和 onmouseenter 的区别示例

• onmouseenter 对应 onmouseleave
• onmouseover 对应 onmouseout

助记：enter 和 leave 是动词，且比较长

• 相同点在于，鼠标进入元素时，会触发 mouseenter 和 mouseover 事件
• 区别发生在进入子元素时
• 如果没有子元素，则没有区别

给红色长方形注册 onmouseover/onmouseout 事件，鼠标延绿色箭头从左向右划

• A 点触发一次 onmouseover 表示进入红色长方形
• B 点触发一次 onmouseout 表示离开红色长方形（进入黑色长放形）；和一次 onmouseover 表示进入黑色长方形
• C 点触发一次 onmouseout 表示离开黑色长方形（进入红色长方形）；和一次 onmouseover 表示进入红色长方形
• C 点触发一次 onmouseout 表示离开红色长方形

给红色长方形注册 onmouseenter/onmouseleave 事件，鼠标延绿色箭头从左向右划

• A 点触发一次 onmouseenter
• D 点触发一次 onmouseleave
• 其他点不触发事件

demo