onmouseover事件和onmouseout事件全面理解


Posted in Javascript onAugust 15, 2016

这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢?

首先实现一个盒子:

onmouseover事件和onmouseout事件全面理解

给这个盒子上绑定上onmouseover事件和onmouseout事件

onmouseover事件和onmouseout事件全面理解

发现它们不会发生什么问题,然后(嘿嘿,你懂得!)

onmouseover事件和onmouseout事件全面理解

让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素

onmouseover事件和onmouseout事件全面理解

我们依旧只给外层父元素A绑定onmouseover事件和onmouseout事件,你会发现发生什么了呢?对,没错!当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件!!Why?这不是我想要的!难道这时候B就不在是A的一部分了吗?当然不是,要不也不会在移入B元素时发生onmouseover事件。这样证明,B元素还是A不可分割的一部分啊。

那到底是怎么回事呢?终究还是事件冒泡搞得鬼?大家都知道常用的浏览器中有两种事件流:事件冒泡和事件捕获。让我们看一下事件冒泡的定义:事件按照从最特定的事件目标逐级向上传播到最不特定的事件目标(document对象)的顺序。所以说当鼠标移入移除A的子元素B的时候,B的onmouseover事件和onmouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素A,A有这两个事件所以就发生了我们看到的情况。

有人会说那怎么避免呢,毕竟不是所有人都会是这种需求嘛,我们只要父级元素的事件触发就好,子级元素就让它静静的当个美男子就好了。

所以W3C在mouseover和mouseout事件中添加了relatedTarget属性 :

•在mouseover事件中,它表示鼠标来自哪个元素

•在mouseout事件中,它指向鼠标去往的那个元素

而而Microsoft在mouseover和mouseout事件中添加了两个属性

•fromElement,在mouseover事件中表示鼠标来自哪个元素

•toElement,在mouseout事件中指向鼠标去往的那个元素

所以我们就有了如下代码的实现

document.getElementById('box1').onmouseover = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 这里可以编写 onmouseenter 事件的处理代码
alert('111');
}
}
document.getElementById('box1').onmouseout = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 这里可以编写 onmouseleave 事件的处理代码
alert('2222');
}
}

以上所述是小编给大家介绍的onmouseover事件和onmouseout事件的全面了解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 #Javascript
又一款js时钟!transform实现时钟效果
Aug 15 #Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 #Javascript
深入分析javascript中console命令
Aug 14 #Javascript
Vue.js 表单校验插件
Aug 14 #Javascript
Vue.js学习笔记之 helloworld
Aug 14 #Javascript
详解Node.js如何开发命令行工具
Aug 14 #Javascript
You might like
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
cookie中的path与domain属性详解
2013/12/18 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python读写配置文件的方法
2015/06/03 Python
python获得一个月有多少天的方法
2015/06/04 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
广州某公司软件工程师面试题
2014/12/22 面试题
机电一体化应届生求职信范文
2014/01/24 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫