What's the difference between mouseenter and mouseover, and mouseout and mouseleave?

Question

I'm looking at the MDN documentation and it says:

mouseenter  A pointing device is moved onto the element that has the listener attached.
mouseleave  A pointing device is moved off the element that has the listener attached.
mouseover   A pointing device is moved onto the element that has the listener attached or onto one of its children.
mouseout    A pointing device is moved off the element that has the listener attached or off one of its children.

Which ok, sounds like mouseenter/mouseleave fires on just the element it self, whereas mouseover/mouse also fires when these events happen over the children.

I have a snippet here showing the different cases:

const body1 = document.getElementById("mouseenter");


const el1 = document.createElement("div"); 
body1.append(el1); 

const el2 = document.createElement("div"); 
 el2.style = "position: relative; top: -60px;"; 
el1.append(el2);

const el2b = document.createElement("div"); 
el1.append(el2b);



const el3  = document.createElement("div"); 
const el4  = document.createElement("div"); 
el4.style = "position: relative; top: -60px;"; 

const el4b  = document.createElement("div"); 

const body2 = document.getElementById("mouseover");
body2.append(el3); 
el3.append(el4); 
el3.append(el4b); 

const inHandler = (event) => {
  event.target.className = "in"; 
}

const outHandler = (event) => {
  event.target.className = "out"; 
}

el1.addEventListener("mouseenter", inHandler); 
el1.addEventListener("mouseleave", outHandler); 

el2.addEventListener("mouseenter", inHandler); 
el2.addEventListener("mouseleave", outHandler); 

el2b.addEventListener("mouseenter", inHandler); 
el2b.addEventListener("mouseleave", outHandler); 


el3.addEventListener("mouseover", inHandler); 
el3.addEventListener("mouseout", outHandler); 

el4.addEventListener("mouseover", inHandler); 
el4.addEventListener("mouseout", outHandler); 

el4b.addEventListener("mouseover", inHandler); 
el4b.addEventListener("mouseout", outHandler);

div {
  border: solid 1px black; 
  margin: 1em;
  padding: 1em; 
  display: inline-block; 
  
  min-width: 50px;
  min-height: 50px; 
  
  background-color: grey; 
}

.in {
  background-color: green; 
}

.out {
  background-color: blue; 
}

p {
   margin-bottom: 2em; 
}

<div id = "mouseenter">
  <p>mouseenter/mouseleave</p>
</div>

<div id = "mouseover">
  <p>mouseover/mouseout</p>
</div>

Now judging on the behaviour of this code - I'm wondering if there's a typo in that document ion.

For example:

• For mouseenter/mouseleave, I would expect that when you hover over the sticking out element, only that one turns green - but the parent turns green too.

• For mouseover/mouseout, I would expect that when you hover over the sticking out element, only that one turns green - but the parent does not turn green.

• For mouseover/mouseout, if you hover over the inner element, then exit it, it turns blue, but I would expect that the parent turns blue too. (Although I accept that that might a race condition where it 'reentered' the parent element to turn it green.

Can someone explain what nuance about mouseevents that I'm missing here?

Answer 1

It's explained in the mouseenter documentation: "A single mouseover event is sent to the deepest element of the DOM tree, then it bubbles up the hierarchy until it is canceled by a handler or reaches the root." Also check the chart there, it makes it easier to understand what that "bubbling" actually means.