这两天接触了onmouseover事件和onmouseout事件，一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件，但是突然发现这些只是对它们简单的描述，下面让我们一起看看它们终究还有神马奇怪的特性，是好还是坏呢？
首先实现一个盒子：
给这个盒子上绑定上onmouseover事件和onmouseout事件
发现它们不会发生什么问题，然后（嘿嘿，你懂得！）
让我们创建一个B元素，让它被嵌套在A元素中，作为A的子元素
我们依旧只给外层父元素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属性 ：
"background-color: #ffff00"> 而而Microsoft在mouseover和mouseout事件中添加了两个属性
"htmlcode">
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事件的全面了解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。