JS鼠标各种事件

 // js三部曲：获取元素，绑定事件，做对应的事
        // 点击事件
        document.getElementById('box1').onclick=function(){
            console.log("点击事件")
        }
        // 双击事件
        document.getElementById('box2').ondblclick=function(){
            console.log('双击事件')
        }
        // 右击事件
        document.getElementById('box3').oncontextmenu=function(){
            console.log('右击事件')
        }
        // 按下事件
        document.getElementById('box4').onmousedown=function(){
            console.log('按下事件')
        }
        // 抬起事件
        document.getElementById('box5').onmouseup=function(){
            console.log('抬起事件')
        }
        // 移入事件
        document.getElementById('box6').onmouseover=function(){
            console.log('移入事件')
        }
        // 移出事件
        document.getElementById('box7').onmouseout=function(){
            console.log('移出事件')
        }
        // 进入事件
        document.getElementById('box8').onmouseenter=function(){
            console.log('进入事件')
        }
        // 离开事件
        document.getElementById('box9').onmouseleave=function(){
            console.log('离开事件')
        }

onmouseover,onmouseout和onmouseenter,onmouseleave区别

两者达到的效果相同

onmouseover和onmouseout不仅会触发自身事件，同时也会触发父级元素的事件

onmouseenter和onmouseleave只会触发自身事件。