鼠标事件

• 1.左键单击事件 click 鼠标左键点击触发

• 2.双击事件 dblclick 300ms 内连续点击两次鼠标

• 3.右键单击事件 contextmenu 鼠标右键点击触发

• 4.鼠标按下事件 mousedown 鼠标左键按下的时候会触发的(哪怕鼠标没有抬起)

• 5.鼠标抬起事件 mouseup 鼠标左键抬起的时候会触发的

• 6.鼠标移入事件 mouseover 鼠标的移动到元素内部时触发

• 7.鼠标移出事件 mouseout 鼠标移动出元素内部时触发

• 8.鼠标移动事件 mousemove 鼠标在元素内部移动时触发

• 9.鼠标移入事件2 mouseenter 鼠标移入事件 只会在移入元素时触发

• 10.鼠标移出事件2 mouseleave 鼠标移入事件 只会在移出元素时触发

• 11.mouseover mouseout 两个方法 移入元素和移入元素子盒子时都会触发 mouseenter mouseleave 两个方法 只会在移入元素时触发

// 对应的 css 和 HTML
// <style>
//     *{
//         margin: 0;
//         padding: 0;
//     }
//     .box1{
//         width: 500px;
//         height: 500px;
//         background-color: pink;
//     }
//     .box2{
//         width: 100px;
//         height: 100px;
//         background-color: gold;
//     }
// </style>

//     <div class="box1">
//         <div class="box2"></div>
//     </div>




       var oBox1 = document.querySelector('.box1')
        var oBox2 = document.querySelector('.box2')
       
           //左键单击事件  click         鼠标左键点击触发
        oBox1.addEventListener('click',function(){
            console.log( '左键单击事件, click ' )
        })

         //双击事件       dblclick          300ms 内连续点击两次鼠标 
         oBox1.addEventListener('dblclick',function(){
            console.log('左键双击事件, dblclick')
         })

         //右键单击事件   contextmenu        鼠标右键点击触发
         oBox1.addEventListener('contextmenu',function(){
            console.log('右键单击事件, contextmenu')
         })
    
         //鼠标按下事件   mousedown          鼠标左键按下的时候会触发的(哪怕鼠标没有抬起)
         oBox1.addEventListener('mousedown',function(){
            console.log('鼠标按下事件, mousedown ')
         })

         //鼠标抬起事件  mouseup             鼠标左键抬起的时候会触发的
         oBox1.addEventListener('mouseup',function(){
            console.log('鼠标抬起事件, mouseup')
         })

         //鼠标移入事件  mouseover           鼠标的移动到元素内部时触发  
        oBox1.addEventListener('mouseover',function(){
            console.log('鼠标移入事件, mouseover')
        })

        //鼠标移出事件  mouseout              鼠标移动出元素内部时触发
        oBox1.addEventListener('mouseout',function(){
            console.log('鼠标移出事件, mouseout')
        })

        //鼠标移动事件  mousemove             鼠标在元素内部移动时触发
        oBox1.addEventListener('mousemove',function(){
            console.log('鼠标移动事件, mousemove')
           
        })

        //鼠标移入事件2 mouseenter           鼠标移入事件 只会在移入元素时触发
        oBox1.addEventListener('mouseenter',function(){
            console.log(' 鼠标移入事件,我只会在移入元素时触发, mouseenter') 
        })
         
        //鼠标移出事件2 mouseleave          鼠标移入事件 只会在移出元素时触发
        oBox1.addEventListener('mouseleave', function(){
            console.log(' 鼠标移入事件 只会在移出元素时触发, mouseleave')
        })


        // mouseover mouseout 两个方法 移入元素和移入元素子盒子时都会触发
        // mouseenter mouseleave 两个方法 只会在移入元素时触发