mouseover,mouseout,mouseenter,mouseleave的区别
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的区别的更多相关文章
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- 你可能不知道的mouseover/mouseout mouseenter/mouseleave
mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...
- 理解mouseover,mouseout,mouseenter,mouseleave
mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover ...
- mouseover,mouseout和mouseenter,mouseleave的区别及适用情况
在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...
- mouseover和mouseenter，mouseout和mouseleave的区别-引发的探索
相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...
- 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
随机推荐
- android 技术相关Blog
android 技术相关 LVXIANGAN的专栏 http://blog.csdn.net/LVXIANGAN/article/category/1101038 Android NFC 开发实例 h ...
- Android NFC开发概述
NFC手机相比普通手机来说,有以下3个附加功能: 1.可以当成POS机来用,也就是“读取”模式 2.可以当成一张卡来刷,也就是NFC技术最核心的移动支付功能 3.可以像蓝牙.Wi-Fi一样做点 ...
- Delphi 在线程中如何使用TClientSocket组件并自动检测该组件
在线程中如何使用TClientSocket组件并自动检测该组件的事件?我想在一个线程中动态创建一个TClientSocket组件,并要求该组件能够自动检测Socket事件(例如OnRead.OnErr ...
- Oracle 11g新参数USE_LARGE_PAGES与AMM使用 (转载)
在之前的文章(http://space.itpub.net/17203031/viewspace-774843)中,笔者介绍了如何在Linux 2.6内核中配置HugePage以及AMM与其的不兼容性 ...
- gcc编译， gdb调试， makefile写法
//test.c: #include <stdio.h> int main(void) { printf("hello world!"); return 0; } == ...
- TchApp项目说明
概述 使用Web做UI,csharp编程,构建跨平台桌面软件,项目目标是打造一个框架,做完相关的基础设施,让使用者能够只关注业务开发,而不需要重新构建基础设施. 项目应该包括:窗口管理API,跨语言( ...
- 【最后一篇API译文】Android开发-API指南- Contacts Provider
Contacts Provider 今年加入了某字幕组,加之杂事颇多,许久未添新文了,惭愧之极. 在听闻 Google 即将重返中国后,近日忽又发现官方网站正在放出 API 中文版,比如本文.当然不是 ...
- PagedList.MVC分页
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 洛谷P2320 鬼谷子的钱袋
P2320 06湖南 鬼谷子的钱袋 171通过 480提交 题目提供者xmyzwls 标签各省省选 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 题目有误 数据需要特判 评测系统太神了 题目 ...
- RHEL7网卡设置
1.改网卡名 先vim /etc/sysconfig/grub:GRUB_TIMEOUT=5GRUB_DEFAULT=savedGRUB_DISABLE_SUBMENU=trueGRUB_TERMIN ...