onmouseover和onmouseenter的区别
onmouseover移入到子元素中，父元素的移入事件也会被触发。
onmouseenter移入到子元素中，父元素的移入事件不会被触发。
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let oFDiv = document.querySelector(".father");
let oSDiv = document.querySelector(".son");
// onmouseover移入到子元素中，父元素的移入事件也会被触发。
oFDiv.onmouseover = function () {
console.log("father"); // father
};
oSDiv.onmouseover = function () {
console.log("son"); // son father
};
// onmouseenter移入到子元素中，父元素的移入事件不会被触发。
oFDiv.onmouseenter = function () {
console.log("father"); // father
};
oSDiv.onmouseenter = function () {
console.log("son"); //son
}
</script>
</body>
onmouseout和onmouseleave的区别
onmouseout移出到子元素中，父元素的移出事件也会被触发。
onmouseleave移出到子元素中，父元素的移出事件不会被触发。
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let oFDiv = document.querySelector(".father");
let oSDiv = document.querySelector(".son");
// onmouseout移出到子元素中，父元素的移出事件也会被触发。
oFDiv.onmouseout= function () {
console.log("father");
};
oSDiv.onmouseout= function () {
console.log("son");
};
// onmouseleave移出到子元素中，父元素的移出事件不会被触发。
oFDiv.onmouseleave= function () {
console.log("father");
};
oSDiv.onmouseleave= function () {
console.log("son");
}
</script>
</body>
