DOM---鼠标事件类型（移入移出）
移入 移出mouseenter mouseleave
在父盒子上触发，在孩子盒子上不触发
移入 移出mouseover mouseout全触发
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 200px;height: 200px;background: yellow;}#child{width: 100px;height: 100px;background: red;}</style>
</head>
<body><div id="box">鼠标移入移出<div id="child"></div></div><script>// 移入 移出mouseover mouseout// 都触发box.onmouseover = function(){console.log("鼠标移入")}box.onmouseout = function(){console.log("鼠标移出")// 移入 移出mouseenter mouseleave// 在父盒子上触发，在孩子盒子上不触发box.onmouseenter = function(){console.log("鼠标移入")}box.onmouseleave = function(){console.log("鼠标移出")}</script>
</body>
</html>