这两天一直在复习onmouseover和onmouseout事件。其实这里面有很多高深的学问。接下来，边肖带你全面了解onmouseover和onmouseout事件。有兴趣的朋友一起来看看吧。

我这两天接触过onmouseover事件和onmouseout事件，我一直以为它们只是分别在鼠标指针移过元素时触发事件和在鼠标指针移出指定对象时触发事件。但我突然发现，这些只是对他们的简单描述。让我们来看看他们奇怪的特征，是好是坏？

首先，实现一个框：

将onmouseover事件和onmouseout事件绑定到此框。

发现他们不会有任何问题，然后(嘿嘿，你懂的！)

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

我们还是只把onmouseover事件和onmouseout事件绑定到外层父元素a，你会发现什么？对，没错！onmouseover事件和onmouseout事件实际上是在鼠标移入移除A的子元素B时发生的！为什么？这不是我想要的！这个时候B不是A的一部分吗？当然不会。否则，当B元素被移入时，onmouseover事件不会发生。这样，元素B仍然是A不可分割的一部分.

这到底是怎么回事？毕竟事件是冒泡了吗？众所周知，常见的浏览器有两种事件流：事件冒泡和事件捕获。我们来看一下事件冒泡的定义：事件从最具体的事件目标逐步传播到最不具体的事件目标(文档对象)。所以当鼠标移入移除A的子元素B时，B的onmouseover事件和onmouseout事件会被触发，但是它没有这两个事件，所以它把这两个事件传递给它的父元素A，A有这两个事件，所以我们看到的情况就发生了。

有人会说怎么避免。毕竟不是每个人都会有这个需求。我们需要的只是父元素的事件触发器，子元素会让它安静的成为一个美男子。

因此，W3C向mouseover和mouseout事件添加了relatedTarget属性：

在mouseover事件中，它指示鼠标来自哪个元素。

在mouseout事件中，它指向鼠标要去的元素。

而微软为mouseover和mouseout事件添加了两个属性。

mouseover事件中的？fromElement指示鼠标来自哪个元素。

在mouseout事件中，toElement指向鼠标指向的元素。

所以我们实现了下面的代码

document.getElementById('box1 ')。onmouseover=function (e) {

如果(！e)e=window . event；

var reltg=e.relatedTarget？e . related target:e . from element；

while (reltg reltg！=this)reltg=reltg . parent node；

if (reltg！=这个){

//在这里，可以编写onmouseenter事件的处理代码。

警报(' 111 ')；

}

}

document.getElementById('box1 ')。onmouseout=函数(e) {

如果(！e)e=window . event；

var reltg=e.relatedTarget？e . related target:e . to element；

while (reltg reltg！=this)reltg=reltg . parent node；

if (reltg！=这个){

//在这里，可以编写onmouseleave事件的处理代码。

alert(' 2222 ')；

}

}

以上是对边肖介绍的onmouseover事件和onmouseout事件的全面了解。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。