- 区别
- 举例
- 补充
区别
mouseover:鼠标移入事件所绑定的元素或其子元素时，都会触发该事件。（具有冒泡特性）
mouseenter:只有鼠标移入事件所绑定的元素时，才会触发该事件。（不具有冒泡特性）
举例
mouseover：
<!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>
</head>
<style>#big{background-color: antiquewhite;width: 500px;height: 500px;margin: auto; }#small{background-color: chartreuse;width: 100px;height: 100px;}
</style>
<body><div id="big"><div id="small"></div></div><script>let div_big=document.querySelector('#big')div_big.onmouseover=function(){console.log('mouseover')//冒泡特性}</script>
</body>
</html>
结果：在鼠标进入当前元素以及它里边的子元素时，都会触发mouseover事件，控制台显示打印了两次mouseover。
mouseenter:
<!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>
</head>
<style>#big{background-color: antiquewhite;width: 500px;height: 500px;margin: auto; }#small{background-color: chartreuse;width: 100px;height: 100px;}
</style>
<body><div id="big"><div id="small"></div></div><script>let div_big=document.querySelector('#big')div_big.onmouseenter=function(){console.log('mouseenter')//不具有冒泡特性}</script>
</body>
</html>结果：在鼠标经过绑定的当前元素的时候mouseenter事件被触发，进入子元素时不再被触发，控制台显示打印了一次mouseenter。
补充
mouseover对应mouseout，mouseout鼠标离开被绑定元素或被绑定元素的子元素时都会触发该事件。
mouseenter对应mouseleave，mouseleave鼠标离开被绑定元素时才会触发该事件。
