js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?

1. 鼠标事件

mouseenter mouseleave (一对事件 鼠标的进入和离开) 不支持冒泡

mouseenter：鼠标从元素外部移到元素内部时触发。

 mouseleave：鼠标从元素内部移到元素外部时触发。

 这两个事件 a) 不冒泡，b) 鼠标经过子元素时不触发父元素的该事件。

 mouseover mouseout (一对事件 鼠标的移入和移出 , 支持冒泡事件(所以子元素的该事件默认会触发父元素上的该事件；除非阻止冒泡)；

mouseover：鼠标从元素外部移到元素内部时触发。

  mouseout：鼠标从元素内部移到元素外部时触发。

这两个事件 a)冒泡，b) 鼠标经过子元素时也触发父元素的该事件。

ex: 比如鼠标从父元素移入到子元素会触发父元素的mouseout 触发子元素的mouseover 又因为冒泡会触发父元素的mouseover; 同时也是进入子元素,所以会触发 子元素的mouseenter;

但是此时鼠标并未离开父元素; 所以不会触发父元素的mouseleave  ) 
 总结: 父mouseout -> 子mouseover -> 父mouseover -> 子mouseenter

 鼠标从子元素移出; 移入父元素 : 首先会触发子元素的mouseout , 因为冒泡所以触发父元素的mouseout; 又因为离开了子元素 所以触发子元素的mouseleave; 移入并进入父元素, 触发 父元素的mouseover  
总结: 子mouseout -> 父mouseout -> 子mouseleave -> 父mouseover

 mousedown （鼠标左右任意键按下)  默认冒泡

 mmouseup( 鼠标左右任意键抬起) 默认冒泡

 click (鼠标左键按下 mousedown -> mouseup -> click) 默认冒泡

 dblclick（注意，是 dbl）  默认冒泡

 mousemove 是如果鼠标移动操作实时响应事件， 比如鼠标拖动一个元素 默认冒泡

 mousewheel  鼠标滚轮事件

2. 鼠标事件代码

    

        father
        son1

        son2

    

     // 对于鼠标的移进移出
    //  1：father 触发 mouseover 和 mouseenter;
    // 打印：  
    // 父元素触发mouseoverfather 
    // 父元素触发mouseenterfather

    //  2: father 触发 mouseover(因为冒泡) 和 mouseenter; son1 触发mouseover 和 mouseenter
    //  打印： 
    // 父元素触发mouseoutfather 
    // 11子元素触发mouseoverson
    // 父元素触发mouseoverfather 
    // 11子元素触发mouseenterson
    
    //  3. father 触发mouseout(因为冒泡) 和 mouseover；son1 触发mouseout 和 mouseleave 
    //  打印： 
    // 11子元素触发mouseoutson 
    // 父元素触发mouseoutfather 
    // 11子元素触发mouseleaveson
    // 父元素触发mouseoverfather 

    //  4 同理2 5同理3

    //  6: father 触发  mouseout 和 mouseleave
    // 打印：  
    // 父元素触发mouseoutfather 
    // 父元素触发mouseleavefather