JS事件类型之鼠标事件

.box1{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(56, 28, 147);
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: rgb(225, 189, 28);
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: rgb(28, 147, 105);
        }
        .box5{
            width: 100px;
            height: 100px;
            background-color: rgb(130, 130, 130);
        }

    <button id="btn1">点击</button>
    <button id="btn2">双击</button>
    <button id="btn3">鼠标按下</button>
    <button id="btn4">鼠标抬起</button>

    <div class="box1" id="btn5"></div>
    <div class="box2" id="btn6"></div>
    <div class="box3" id="btn7"></div>
    <div class="box4" id="btn8"></div>
    <div class="box5" id="btn9"></div>

 var btn1=document.getElementById("btn1")
        var btn2=document.getElementById("btn2")
        var btn3=document.getElementById("btn3")
        var btn4=document.getElementById("btn4")
        var btn5=document.getElementById("btn5")
        var btn6=document.getElementById("btn6")
        var btn7=document.getElementById("btn7")
        var btn8=document.getElementById("btn8")
        var btn9=document.getElementById("btn9")


        btn1.onclick = function(){
            console.log("单击事件");
        }


        btn2.onblclick = function(){
            console.log("双击事件");
        }

        btn3.onmousedown = function(){
            console.log("鼠标按下");
        }

        btn4.onmouseup = function(){
            console.log("鼠标抬起");
        }

        btn5.onmousemove =function(){
            console.log("鼠标移动了");
        }

        btn6.onmouseenter =function(){
            console.log("鼠标进入事件");
        }

        btn7.onmouseleave =function(){
            console.log("鼠标离开事件");
        }

        btn8.onmouseover =function(){
            console.log("鼠标进入事件");
        }

        btn9.onmouseout =function(){
            console.log("鼠标离开事件");
        }

mouseenter、mouseleave和onmouseover、mouseout区别：
如果同时存在父元素与子元素，并在父元素上添加函数，后面两个当鼠标移动到子元素和父元素都会控制台打印，前面两个则不会。