js onmouseenter/onmouseleave 和onmouseover/onmouseout区别实例讲解

<div id="box1">1
       <div id="box2">2
              <div id="box3">3</div>
       </div>
 </div>
< >
            var oB1 = document.querySelector('#box1');

            oB1. =function () {
                console.log('enter');
            }
            oB1. =function () {
                console.log('leave');
           }
            /*oB1. =function () {
                console.log('over');
            }
            oB1. =function () {
                console.log('out');
            }*/
 </ >

  / ：在移入到子元素时会触发；

当鼠标从外部移入3触发 ，再移入2触发（3的 ）和（2的 ），在移入1触发（2的 ）和（1的 ）；

/ ：不会受子元素影响

当鼠标同上移入3触发 ，但继续移入到2和1中时，并不会触发 事件，当鼠标移出3到外部时才触发 。