JQuery中mouseover和mouseenter的区别

       在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候,需求没那么详细,毕竟俩事件的大致意思都一样
---就是鼠标移上去,就执行该事件的自定义函数。其实我们自己去看下他们的概念,我想你应该可以从中发现区别于不同:
  mouseover:当鼠标指针位于元素上方时,会发生 mouseover 事件。
       mouseenter:当鼠标指针穿过元素时,会发生 mouseenter 事件。
  从这里的一个小插曲上,我们应该可以看出,mouseenter是穿过,所以只能触发一次改事件,而mouseover是位于上方,

可以想下,如果给div设定了一个mouseover事件,其子孙后代都可以响应改事件,so...一旦鼠标从父级进入自己也会触发这个效果,当从子集回到父级也会触发这种效果。所以,你可以这么理解:mouseenter事件只作用于目标元素,而mouseover最用于目标元素及其后代元素。 如果还没明白,DOM案例可见慕课网中关于二者的案例。

    另外,相对于配合鼠标离开事件离开,mouseover事件配合mouseout事件,而mouseenter配合mouseleave事件。那么mouseout和mouseleave的区别,其实跟mouseover和mouseleave恰恰相反。 

mouseout:当鼠标指针离开元素上方时,会发生 mouseover 事件一般与mouseover配合使用。
mouseleave:当鼠标指针离开元素时,会发生 mouseenter 事件一般与mouseenter配合使用。
mouseout是当离开目标元素或进入后代元素的时候,后代元素离开并进入目标元素或者完全离开的时候,都会触发mouseout事件,而mouseleave是当鼠标离开目标元素的时候,于后代无关。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值