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. 15个IT技术人员必须思考的问题

    行内的人自嘲是程序猿.屌丝和码农,行外的人也经常拿IT人调侃,那么究竟是IT人没有价值,还是没有仔细思考过自身的价值? 1.搞IT的是屌丝.码农.程序猿? 人们提到IT人的时候,总会想到他们呆板.不解 ...

  2. Mac添加环境变量的三种方法

    法一: sudo vi /etc/paths 来编辑 paths,将环境变量添加到 paths 中. vim 是一个编辑器,另外还有几个,如:Pico,Emacs. Hint:输入环境变量时,不用一个 ...

  3. 常用开源Jabber(XMPP) IM服务器介绍(转)

      1. Openfire (Wildfire) 3.x授权: GPL or 商用操作系统平台:所有(使用Java开发)XMPP Jabber 协议实现情况:98%Tim 评价:安装和使用非常简单,安 ...

  4. delphi中使用spcomm来实现串口通讯(转载)

    http://blog.sina.com.cn/s/blog_7880f98301010pi8.html 转自——飘雪的世界 最近两天一直在研究spcomm控件的使用,之前也是很不太明白,看了很多的例 ...

  5. Maven项目中，编译proto文件成Java类

    新建Maven项目 新建一个 Maven 项目: pom定义了最小的maven2元素,即:groupId,artifactId,version. groupId:项目或者组织的唯一标志,并且配置时生成 ...

  6. python metaclass 入门简介

    http://cizixs.com/2015/08/30/metaclass-in-python 动态类型也是类型 python 是一种动态类型语言,换句话说每个变量可以在程序里任何地方改变它的类型. ...

  7. POJ 2112 Optimal Milking 【网络流】【二分】【最短路】

    题意: k c m 分别代表挤奶机数量,牛数量,和挤奶机容量. 接下来(n=k+c)n*n的矩阵A,代表挤奶机或者牛的距离,如果对角线都为0,如果非对角线没有直接路相连也为0. 1 <= K & ...

  8. iOS 进入后台的处理

    当App进入后台时(按下Home键), App会被系统暂停, 所有的程序逻辑都会停止, App还是驻留内存中, 除非被用户强制退出, 或者被系统kill掉(为了保证正在前台运行的App有足够的内存, ...

  9. 安装LINUX X86-64的10201出现链接ins_ctx.mk错误

    在安装linux X86-64的Oracle10201时,在链接过程中出现了这个错误. 详细错误信息为: Error in invoking target ‘install’ of makefile  ...

  10. 问题：未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项。试图加载格式不正确的程序。

    在应用程序池中把对应的高级设置中的启用win32位应用程序改为true即可