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. VisualStudio使用小技巧——快捷键（转）

    1. 怎样调整代码排版的格式?选择:编辑—>高级—>设置文档的格式或编辑—>高级—>设置选中代码的格式.格式化cs代码:Ctrl+k+f 格式化aspx代码:Ctrl+k+d2 ...

  2. java基础-排序

    冒泡排序 选择排序 生成数组,数组元素值为1-1000

  3. Jmeter监控服务器性能

    JMeter是一款压力测试工具,我们也可以用它来监控服务器资源使用情况.JMeter正常自带可以通过Tomcat的/manager/status来监控服务资源使用情况.这种情况只能监控Tomcat支持 ...

  4. 94、EventBus框架 ---- 转载

    EventBus使用之基础 http://blog.csdn.net/yanbober/article/details/45667363 EventBus框架库代码走读  http://blog.cs ...

  5. Django网站直接使用supervisor部署

    python manage.py createsuperuser python manage.py migrate 生成网站的supervisor配置文件: echo_supervisord_conf ...

  6. threading event

    #!usr/bin/env python 2 #coding: utf-8 3 #Author: Andy 4 5 import threading 6 import time 7 8 def pro ...

  7. html5—— 应用程序缓存

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这 ...

  8. 用imageNamed加载图片产生的问题

    通常我们会用imageNamed:来加载图片,但是用这个API有个问题,就是它会缓存加载的image. 因此,对于那些被重用的图片,这个API很高效.但是对于那些使用很少的图片,用这个就很耗内存,那怎 ...

  9. HDU 4292 Food

    Food Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  10. WebsitePanel 2.1.0beta配置部分

    到http://www.websitepanel.net/downloads/下载好单独安装包作为网站内容运行在IIS7.0上,配置applicationpool为localsystem Websit ...