mouseenter、mouseleave与mouseover、mouseout都是处理鼠标的移入移出事件,但mouseover、mouseout事件在绑定节点的子节点中也会触发,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#out{
width: 200px;
height:200px;
background-color: red;
display: flex;
justify-content: center;
align-items:center;
}
#in{
width: 100px;
height:100px;
background-color: green;
}
</style>
<body>
<div id="out">
<div id="in"></div>
</div>
<script>
let outDom = document.querySelector('#out');
outDom.onmouseenter = function () {
console.log('mouseenter');
};
outDom.onmouseleave = function () {
console.log('mouseleave');
};
outDom.onmouseover = function (event) {
console.log('mouseover');
};
outDom.onmouseout = function (event) {
console.log('mouseout');
};
</script>
</body>
</html>
以上代码创建两个父子关系的div,给#out分别绑定mouseenter、mouseleave与mouseover、mouseout事件,将鼠标从左至右滑过观察控制台打印结果:
可以发现当鼠标划过#out左侧边框时出发了mouseover与mouseenter事件,紧接着划过#in左侧边框时触发了mouseout与mouseover事件,划过#in右侧边框时又触发了mouseout与mouseover事件,直达最后移出#out时触发了mouseout与mouseleave事件。综上观察可以看出:mouseenter与mouseleave只在鼠标从#out移入、移出时才会触发,而mouseenter与mouseout不但会在#out移入移出触发,还会在子节点#in移入移出时触发。