Javascript 什么'；mouseenter和mouseover，mouseout和mouseleave之间的区别是什么？

我在看照片，上面写着：

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.

好的，听起来像mouseenter/mouseleave只在元素本身上触发，而mouseover/mouse在这些事件发生在子元素上时也会触发

我这里有一个片段显示了不同的情况：

constbody1=document.getElementById（“mouseenter”）；
const el1=document.createElement（“div”）；
body1.追加（el1）；
const el2=document.createElement（“div”）；
el2.style=“位置：相对；顶部：-60px；”；
el1.追加（el2）；
const el2b=document.createElement（“div”）；
el1.追加（el2b）；
const el3=document.createElement（“div”）；
const el4=document.createElement（“div”）；
el4.style=“位置：相对；顶部：-60px；”；
const el4b=document.createElement（“div”）；
const body2=document.getElementById（“鼠标悬停”）；
正文2.附加（el3）；
el3.追加（el4）；
el3.追加（el4b）；
常量inHandler=（事件）=>{
event.target.className=“in”；
}
const outHandler=（事件）=>{
event.target.className=“out”；
}
el1.添加了监听器（“鼠标器”，inHandler）；
el1.添加事件监听器（“mouseleave”，outHandler）；
el2.添加的监听器（“鼠标器”，inHandler）；
el2.addEventListener（“mouseleave”，outHandler）；
el2b.添加的监听器（“鼠标器”，inHandler）；
el2b.addEventListener（“mouseleave”，outHandler）；
el3.添加的监听器（“鼠标上方”，inHandler）；
el3.添加事件监听器（“mouseout”，outHandler）；
el4.添加的监听器（“鼠标上方”，inHandler）；
el4.添加事件监听器（“mouseout”，outHandler）；
el4b.添加的监听器（“鼠标上方”，inHandler）；
el4b.addEventListener（“鼠标出”，outHandler）
div{
边框：实心1px黑色；
边缘：1米；
填充：1em；
显示：内联块；
最小宽度：50px；
最小高度：50px；
背景颜色：灰色；
}
.在{
背景颜色：绿色；
}
.出去{
背景颜色：蓝色；
}
p{
边缘底部：2米；
}

鼠标器/鼠标器

鼠标盖/鼠标出

我认为W3学校的答案（示例）最能解释它


对于鼠标在其上的移动，在输入或退出包含事件的嵌套区域时递增，鼠标指针在输入特定div区域时递增，鼠标指针文档中对此进行了说明：
“一个mouseover事件被发送到DOM树的最深元素，然后它在层次结构中冒泡，直到它被处理程序取消或到达根。”同时检查那里的图表，它使人们更容易理解“冒泡”的实际含义