1、

mouseover:会在鼠标进入该元素或者该元素的子元素时触发

mouseenter:只在鼠标进入该元素时触发

mouseout:在鼠标移出该元素或则该元素的子元素时触发

mouseleave:只在鼠标离开该元素时触发

所以在整个过程中,mouseenter mouseleave只触发一次。over和out触发多次(每次进入和退出子元素都会触发)

  1. var odiv = document.getElementById('outer');
  2. odiv.addEventListener('mouseenter',enterHandler,false);
  3. odiv.addEventListener('mouseover',overHandler,false);
  4. odiv.addEventListener('mouseout',outHandler,false);
  5. odiv.addEventListener('mouseleave',leaveHandler,false);
  6.  
  7. function enterHandler(){
  8. console.log('触发enter事件');
  9. }
  10. function overHandler(){
  11. console.log('触发over事件');
  12. }
  13. function outHandler(){
  14. console.log('触发out事件');
  15. }
  16. function leaveHandler(){
  17. console.log('触发leave事件');
  18. }

mouseover事件mouseenter事件的更多相关文章

  1. jQuery里的mouseover与mouseenter事件类型区别

    JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...

  2. setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.

    Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mo ...

  3. mouseover事件与mouseenter事件的区别

    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 被触发的 M ...

  4. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  5. 做二级菜单时候遇到的关于事件冒泡以及mouseover和mouseenter的不同

    二级菜单作为最普通小组件,我遇到了坑. <style> .wrapper { height: 150px; border: 1px solid; width: 150px; } .wrap ...

  6. 一个例子说明mouseover事件与mouseenter事件的区别

    <html> <head> <meta charset="UTF-8"> <title>haha</title> < ...

  7. mouseover和mouseenter两个事件的区别

    mouseover(鼠标覆盖) mouseenter(鼠标进入) 二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素 ...

  8. 事件处理& 事件委托& 区别mouseover与mouseenter

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 第二十七课:滚轮事件,mouseenter与mouseleave事件的修复

    滚轮事件 jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下. mousewheel事件只有火狐浏览器不支持.mousewheel用于取得滚动距离的属 ...

随机推荐

  1. hdu 5952 连通子图

    Counting Cliques Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  2. Dice (II) (DP)唉,当时没做出来

    Dice (II) Time Limit: 3000MS   Memory Limit: 32768KB   64bit IO Format: %lld & %llu [Submit]   [ ...

  3. An Introduction to Variational Methods (5.2)

    我们现在已经得到了关于潜在变量Z的优化分布的表达形式: ‍ 其中: ‍ 所以现在我们可以得到Z的期望: ‍ 另外对于Z还值得一提的是,我们从其优化分布的表达式中可以看出,各个Z的组成部分之间还是相互耦 ...

  4. 决策树模型组合之随机森林与GBDT

    版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...

  5. Elixir游戏服设计二

    搞一个例子,而没有实际的目标,做起来真是烦人.几次三番都想放弃. 后来想想,即使最后完成不了完整的服务器,把需要的知识点搞搞,摸熟悉也是好的. 这里没有完整的项目目录,主要是对需要的指点进行整理.要完 ...

  6. ubuntu中切换到root账号方法

    ubuntu如何切换到root用户身份? 前面小编分享了ubuntu怎么开启root用户,下面小编来分享如何切到到root用户 方法/步骤 按照下面的方式打开终端工具,或者使用终端工具的快捷键Ctrl ...

  7. Linux目录结构详解(一)

    Linux目录结构,在逻辑上所有目录只有一个顶点,即/(根目录),是所有目录的起点.根下面类似于一个倒挂着的树的结构. Linux目录按照类别组织: 应用程序 /usr/bin 数据文件,帮助/usr ...

  8. UITextView实现限制100字

    placeHoderLable = [[UILabel alloc]initWithFrame:CGRectMake(3, 3, DeviceWidth-6, 40)]; //根据情况调节位置 pla ...

  9. SqlBulkCopy效率低下原因分析

    看到标题 应该会奇怪 SqlBulkCopy 为什么会效率低下 场景:接手项目 数据库SQLSERVER2008R2,  目前有一张流水表单表数据超过4亿,表中建有索引,有其他模块对这个表进行查询操作 ...

  10. dig 命令使用

    1.简单查询 # dig www.guoxh.cn 2.按记录类型查询,默认为A记录 # dig www.guoxh.cn cname # dig www.guoxh.cn mx # dig www. ...