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. linux内核设计与实现--进程管理

    进程就是出于执行期的程序.进程的另一个名字是任务. 执行线程,简称线程(thread),是在进程中活动的对象.每个线程都有一个独立的程序计数器.进程栈和一组进程寄存器.内核调度的对象是线程,而不是进程 ...

  2. 使用 cURL 获取站点的各类响应时间 – dns解析时间,响应时间,传输时间

    http://zhangrenfang8738.blog.163.com/blog/static/95401881201142711450245/ curl监控站点响应时间 2011-05-27 11 ...

  3. java记录在线人数小案例

    文件目录: web.xml: <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...

  4. 批处理操作mysql数据库

    批处理操作mysql数据库 1.使用批处理自动登录mysql数据库 @echo offcd C:\program files\mysql\mysql server 5.5\binmysql -u ro ...

  5. c语言实现词频统计

    需求: 1.设计一个词频统计软件,统计给定英文文章的单词频率. 2.文章中包含的标点不计入统计. 3.将统计结果以从大到小的排序方式输出. 设计: 1.因为是跨专业0.0···并不会c++和java, ...

  6. android 解决ScrollView嵌套ListView的问题，不能全屏，全屏不能显示下面控件

    在开发中遇到ScrollView嵌套ListView的问题,最开始发出不能全屏,效果是这样的: 但我想要的效果是这样的: 下面看一下布局文件: <?xml version="1.0&q ...

  7. 如何在 Git 里撤销(几乎)任何操作

    任何版本控制系统的一个最有的用特性就是“撤销 (undo)”你的错误操作的能力.在 Git 里,“撤销” 蕴含了不少略有差别的功能. 当你进行一次新的提交的时候,Git 会保存你代码库在那个特定时间点 ...

  8. git克隆项目到一个非空目录

    这只是记录: 1. 进入非空目录,假设是 /workdir/proj1 2. git clone --no-checkout https://git.oschina.net/NextApp/platf ...

  9. 关于AIR新浪登录测试

    /** *由于在应用申请中,我设置的域名属于新浪云,因此在本地测试的话肯定不能成功的,有个办法就是直接在新浪云那边授权成功后,将token的值直接使用post或者get方法传递过来,直接在本地 *lo ...

  10. Laxcus大数据管理系统2.0（10）- 第八章 安全

    第八章 安全 由于安全问题对大数据系统乃至当前社会的重要性,我们在Laxcus 2.0版本实现了全体系的安全管理策略.同时我们也考虑到系统的不同环节对安全管理的需求是不一样的,所以有选择地做了不同的安 ...