onmoseover 和 onmouseenter 的区别示例

  • onmouseenter 对应 onmouseleave
  • onmouseover 对应 onmouseout

助记:enter 和 leave 是动词,且比较长

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

demo

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

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

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

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

demo

发布了44 篇原创文章 · 获赞 25 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/csdn372301467/article/details/87626907