常用鼠标事件

div{
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        p{
            width: 100px;
            height: 80px;
            background-color: red
        }    

 <div><p></p></div>

 

var div = document.querySelector("body div")
        // 1, 单击事件 click
        div.onclick = function(){
            console.log("单击")
        }
        // // 2, 双击事件 dblclick
        div.ondblclick = function(){
            console.log("双击")
        }
        // // 3, 鼠标按下  mousedown
        div.onmousedown = function(){
            console.log('鼠标按下')
        }
        // // 4, 鼠标抬起  mouseup
        div.onmouseup = function(){
            console.log('鼠标抬起')
        }
        // // 5, 鼠标移动  mousemove
        div.onmousemove = function(){
            console.log("鼠标在这个div内部正在移动ing")
        }
        // // 6, 右键菜单  contextmenu
        div.oncontextmenu = function(){
            console.log("调出右键菜单")
        }
        // // 7, 滑轮滚动  wheel
        div.onwheel = function(){
            console.log("滑轮滚动")
        }

// 8, 鼠标移入移出 mouseenter/mouseleave  不继承,鼠标在子标签上不会触发事件
        div.onmouseenter = function(){
            console.log("鼠标移入")
        }
        div.onmouseleave = function(){
            console.log("鼠标移出")
        }

简单来说就是鼠标进入div区域会显示移入，出div就会显示移出


// 9, 鼠标悬停离开  mouseover/mouseout 会继承, 鼠标在子标签上也会触发事件
        div.onmouseover = function(){
            console.log("鼠标悬停")
        }
        div.onmouseout = function(){
            console.log("鼠标离开")
        }
而悬停离开的话，就是鼠标进入div区域会提示悬停，然后鼠标进入p标签区域会先显示 离开 再悬停，
最后移出显示离开