onmouseover Events and onmouseout events fully understand _javascript skills

These two days are exposed to the onmouseover event and the onmouseout event, always thinking that they are simply a matter of triggering events when the mouse pointer is moved over an element, and triggering events when the mouse pointer moves out of the specified object, but suddenly discovering these are simply descriptions of them, Now let's see if they still have the strange characteristics of the horse, is it good or bad?

First Implement a box:

Tie this box up. onmouseover Events and onmouseout events

Find out what's not going to happen to them, and then (Hey, you know!) ）

Let's create a B element and let it be nested within a element as a child element

We still bind onmouseover events and onmouseout events only to the outer parent element A, what do you find out? Yes, that's right! The onmouseover event and the onmouseout event occurred when the mouse moved into the child element B of removing a. Why? It's not what I want! is b not a part of a right now? Of course not, or the onmouseover event will not occur when the B element is moved. This proves that the B element is an integral part of a.

What the hell is going on here? After all, it's still a matter of bubbling up a ghost? As you know, there are two types of event flow in a common browser: event bubbling and event capture. Let's look at the definition of event bubbling: the order in which events propagate from the most specific event target up to the least specific event target (Document object). So when you move the mouse over the child element B of a, b the onmouseover event and the onmouseout event are triggered, but it does not have these two events on its own, and the two events are passed to its parent element a,a there are two events so what we see is happening.

Some people will say how to avoid it, after all, not all people will be this kind of demand, we as long as the parent element of the event trigger is good, child elements let it quietly as a handsome man is good.

　　So the consortium added the Relatedtarget attribute to the mouseover and Mouseout events:

• In the MouseOver event, it represents which element the mouse comes from
• In the Mouseout event, it points to the element that the mouse goes to

Microsoft added two properties to the MouseOver and Mouseout events

fromelement, which element of the mouse is represented in the MouseOver event
Toelement, the element that points to the mouse in the Mouseout event

So we have the following implementation of the Code

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) {
///Here you can write the processing code
alert (' ") for the Onmouseenter event;
}
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) {
///Here you can write the processing code
alert (' 2222 ') of the OnMouseLeave event;
}

The above is a small set to introduce the onmouseover event and onmouseout event of a comprehensive understanding, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!