mouseover/mouseout与mouseenter/mouseleave两对事件都可以实现鼠标移进/移出事件的监听，那么他们有什么区别吗？

分析如下代码：

<!doctype html>
<html lang="en">
<head>
<title>mouseouver与mouseenter的具体区别的在线演示-aijQuery.cn</title>
<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body style="text-align:center"><br><br>
  <DIV id="div1" class="mx-auto p-3" style="width:450px;background-color:rgba(111, 111, 111, 0.32)">
    div1 绑定mouseover事件
    <p class="p-3" style="background-color:white">
      p 鼠标经过此P标签时 也会触发
      <span></span>
    </p>
  </DIV>
  <DIV id="div2" class="mx-auto p-3 mt-3" style="width:450px;background-color:rgba(111, 111, 111, 0.32)">
    div2 绑定mouseenter事件
    <p class="p-3" style="background-color:white">
      p  鼠标经过此P标签时 不会触发
      <span></span>
    </p>
  </DIV>
<script language="javascript">
var x=0;var y=0;
$("#div1").mouseover(function(){
  $(this).find("span").text(x+=1);
});
$("#div2").mouseenter(function(){
  $(this).find("span").text(y+=1);
});
</script>
</body>
</html>

程序运行结果如下：

mouseover/mouseout与mouseenter/mouseleave的区别_mouseover

我们发现如下区别：
1、mouseover/mouseout事件支持冒泡，绑定的事件会冒泡到子标签上。
2、mouseenter/mouseleave事件则只针对所绑定的标签，不会冒泡到子标签上。