1.前言

今天下午参加一个面试，对方问我写不写博客，这时候才猛然意识到好久没写东西了。最近一直在外边实习，每天有很多经历和挑战，但是却没有及时地记录下来，这一点必须得批评自己，以后得经常把自己遇到的问题及时记录下来。

言归正传，今天面试卡住的第一个问题就是问我如何获取mouseenter、mouseleave中的两个对象？对这两个对象我只知道它们的特点是均不冒泡，是DOM新规范定义的方法，至于其他东西就不知道了。

2.二者的区别（以mouseover、mouseenter为例）

<!doctype html>

<html>

<head>

    <title>mouseover and mouseenter</title>

    <style>

       #outer{width: 800px;  border: 1px solid #DDD; overflow: hidden; padding: 100px 50px;}

       #inner{height: 120px;  border:1px solid #DDD; }

    </style>

</head>

<body>

    <div id="outer">

	<p id="inner">aaaaaa</p>

    </div>

</body>

</html>

<script>

   var outer = document.getElementById('outer');

   outer.addEventListener('XXX',function(event){

	console.log('target:' + EventUtil.getTarget(event));

	console.log('relatedTarget:' + EventUtil.getRelatedTarget(event));

   });

   var EventUtil = {

	getEvent: function(event){

		return event || window.event;

	},

	getTarget: function(event){

		return EventUtil.getEvent(event).target || EventUtil.getEvent(event).srcElement;

	},

	getRelatedTarget: function(event){

		return EventUtil.getEvent(event).relatedTarget || EventUtil.getEvent(event).fromElement || EventUtil.getEvent(event).toElement ;

	}

   }

</script>

当xxx = mouseover时：把鼠标放在outer容器里面来回移动，就会发现控制台不断地输出，说明mouseover是可以冒泡的；

当xxx = mouseenter时：把鼠标放在outer容器里面来回移动，就会发现控制台没有输出，说明mouseenter是不冒泡的；

3.关于上面的EventUtil.getRelatedTarget则是考虑到IE和非IE兼容性。

4.jquery新发现：查看jquery的hover方法，就会发现

jQuery.fn.hover = function( fnOver, fnOut ) {

	return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );

};

　　看来jquery早就也意识到mouseover、mouseout冒泡带来的问题了。

　　

mouseover,mouseout,mouseenter,mouseleave的区别的更多相关文章

  1. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

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

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

  3. 你可能不知道的mouseover/mouseout mouseenter/mouseleave

    mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...

  4. 理解mouseover,mouseout,mouseenter,mouseleave

    mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover ...

  5. mouseover,mouseout和mouseenter,mouseleave的区别及适用情况

    在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...

  6. mouseover和mouseenter，mouseout和mouseleave的区别-引发的探索

    相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...

  7. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  8. mouseover与mouseenter,mouseout与mouseleave的区别

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

  9. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

随机推荐

  1. C#里WinForm开发中如何实现控件随窗体大小的改变而自动适应其改变(转)

    在设计可供用户调整大小的窗体时,如何实现该窗体上的控件也应能正确地随窗体的改变而自动调整大小并且能重新定位?此时就要借助控件的．Anchor属性.Anchor属性定义控件的定位点位置.当控件锚定到某个 ...

  2. asp.net读取txt并导入数据库

    源地址:http://www.cnblogs.com/hfzsjz/p/3214649.html

  3. {JavaScript}栈和堆内存，作用域

    1.栈 stack”和“堆 heap”:         简单的来讲,stack上分配的内存系统自动释放,heap上分配的内存,系统不释放,哪怕程序退出,那一块内存还是在那里.stack一般是静态分配 ...

  4. [SQL]把同一字段里的多行数据用一行显示

    declare @t table(id int,num int) insert @t , union all , union all , --select * from @t ----查询 decla ...

  5. ms sqlserver 系列之如何查看数据链接数

    [转]如何查看SQL SERVER数据库当前连接数 1.通过管理工具开始->管理工具->性能(或者是运行里面输入mmc)然后通过添加计数器添加 SQL 的常用统计然后在下面列出的项目里面选 ...

  6. viewPager双层嵌套的事件问题

    问题描述:  ViewPager嵌套viewPager, 当childViewPager中加入了Onclick事件, 导致childViewpager的滑动消息被拦截掉. 很无奈. 解决方法: 重写c ...

  7. 菜鸟-手把手教你把Acegi应用到实际项目中(12)-Run-As认证服务

    有这样一些场合,系统用户必须以其他角色身份去操作某些资源.例如,用户A要访问资源B,而用户A拥有的角色为AUTH_USER,资源B访问的角色必须为AUTH_RUN_AS_DATE,那么此时就必须使用户 ...

  8. The Ninth Hunan Collegiate Programming Contest (2013) Problem F

    Problem F Funny Car Racing There is a funny car racing in a city with n junctions and m directed roa ...

  9. iOS中常见的设计模式——单例模式\委托模式\观察者模式\MVC模式

    一.单例模式 1. 什么是单例模式? 在iOS应用的生命周期中,某个类只有一个实例. 2. 单例模式解决了什么问题? 想象一下,如果我们要读取文件配置信息,那么每次要读取,我们就要创建一个文件实例,然 ...

  10. 无法定位程序输入点ucrtbase.

    转:http://tieba.baidu.com/p/3848709732 后的解决方法是需要安装VC 2015 Redistributable,请自己选择相应的版本.百度云盘共享地址:http:// ...