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#使用EmguCV实现视频读取和播放，及多个视频一起播放的问题

    大家知道WPF中多线程访问UI控件时会提示UI线程的数据不能直接被其他线程访问或者修改,该怎样来做呢? 分下面两种情况 1.WinForm程序 1)第一种方法,使用委托: private delega ...

  2. C++学习26 运算符重载的概念和语法

    所谓重载,就是赋予新的含义.函数重载(Function Overloading)可以让一个函数名有多种功能,在不同情况下进行不同的操作.运算符重载(Operator Overloading)也是一个道 ...

  3. freemarker中使用shiro标签

    地址:https://github.com/jagregory/shiro-freemarker-tags下载该jar包 或者源代码文件复制到自己工程的lib下或者package中  如果使用spri ...

  4. jdk集合常用方法分析之HashSet和TreeSet

    HashSet常用方法介绍 public boolean add(E e) public boolean isEmpty() void clear() public Iterator<E> ...

  5. github入门

    一.先了解 相比CVS\SVN优势: - 支持离线开发,离线Repository- 强大的分支功能,适合多个独立开发者协作- 速度快 github 本地有仓库,储存着所有repository的历史: ...

  6. 64位CentOS 6.4下安装wine

    From: http://zhidao.baidu.com/question/530358126.html From: http://hi.baidu.com/billdkj/item/464fb84 ...

  7. android L 新控件侧滑菜单DrawerLayout 使用教程

    介绍 drawerLayout是Support Library包中实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产 ...

  8. C# 版dll 程序集合并工具

    C# 版dll 程序集合并工具 最近要开发一个控件给同事用,开发中会引用一些第三方DLL,这样交给用户很不方便,希望的效果是直接交付一个DLL文件.网上找了一些资料. 1.       使用 Cost ...

  9. 应用层（一）HTTP服务访问基本流程和HTTP报文详解

    HTTP属于TCP/IP模型中一个面向文本的应用层协议,所使用的服务器端口号的TCP中的80端口,通信双方在这个基础上进行通信. 每个服务器都有一个应用进程,时刻监听着80端口的用户访问请求.当有用户 ...

  10. [AFUI]App Framework Quickstart

    ---------------------------------------------------------------------------------------------------- ...