mouseover与mouseenter区别

学习笔记。

mouseover：在鼠标移入元素本身或者子元素时都会触发事件，相当于有一个冒泡过程。而且在鼠标移入子元素中时，父元素会显示离开的状态；相应的，当鼠标从子元素移入父元素，子元素也会显示离开状态。与之相对应的是“mouseout”。

mouseenter：仅在鼠标移入元素本身才会触发事件，移入子元素并不会触发事件，相当于没有冒泡过程。与之相对应的是“mouseleave”。

举个例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <style>
        #div1 {
            float: left;
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #div2 {
            width: 50px;
            height: 50px;
            background-color: yellow
        }
        #div3 {
            float: left;
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        #div4 {
            width: 50px;
            height: 50px;
            background-color: aqua;
        }
    </style>
    <script>
        $(function(){
            
            $("#div1")
            .mouseover(function(){
                console.log("进入div1");
            })
            .mouseout(function(){
                console.log("离开div1");
            })
            
            $("#div3")
            .mouseenter(function(){
                console.log("进入div3");
            })
            .mouseleave(function(){
                console.log("离开div3");
            })
            
        })
    </script>
</head>

<body>
    <div id="div1">
        div1
        <div id="div2">
            div2
        </div>
    </div>
    <div id="div3">
        div3
        <div id="div4">
            div4
        </div>
    </div>
</body>
</html>