onmouseover、onmouseout和onmouseenter、onmouseleave

onmouseover、onmouseout和onmouseenter、onmouseleave的区别

需要复习冒泡相关知识

onmouseover、onmouseout

1. 存在冒泡传播机制，并且不能理解为进入和离开，而是鼠标焦点在谁上或者离开谁
2. 导致问题：从小盒子到大盒子，触发小盒子out，也会触发大盒子over，从大盒子进入小盒子，触发大盒子的out，触发小盒子的over...
3. 鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件。

	outer.onmouseover = function (){
		  console.log('outer over')
		  }
	inner.onmouseover = function (){
		  console.log('inner over')
		  }
	outer.onmouseout = function (){
		  console.log('outer out')
		  }
	inner.onmouseout = function (){
		  console.log('inner out')
		  }

当鼠标从上到下划过时：依次打出

    "outer over"
    "outer out"
    "inner over"
    "outer over"
    "inner out"
    "outer out"
    "outer over"
    "outer out"

代码演示链接

分析

1. 进入outer，触发outer的over事件 => outer over
2. 从outer中出来，触发outer的our事件 => outer out
   进入inner， 触发inner的over事件 => inner over
   由于冒泡，触发outer的over事件 => outer over
3. 从inner中出来，触发inner的out事件 => inner out
   由于冒泡，触发outer的out事件 => outer out
   进入outer，触发outer的 over事件 => outer over
4. 从outer中出来，触发outer的out事件 => outer out

onmouseenter、onmouseleave

1. 默认阻止了冒泡传播机制，事件行为是真正的进入和离开（真实项目中，一般想要操作的大盒子，给其进入离开事件绑定方法，并且大盒子还存在小盒子，我们基本上都用enter/leave）
2. enter：进入
3. leaver：离开

• 从大盒子进入到小盒子，不会触发大盒子的leave。
• 从小盒子重新进入大盒子，也不会楚大大盒子的enter，因为不输入重新进入。

	   inner.onmouseenter = function () {
			console.log('INNER ENTER');
		};
		outer.onmouseenter = function () {
			console.log('OUTER ENTER');
		};
		inner.onmouseleave = function () {
			console.log('INNER LEAVE');
		};
		outer.onmouseleave = function () {
			console.log('OUTER LEAVE');
		};

当鼠标从上到下划过时：依次打出

          "OUTER ENTER"
    "INNER ENTER"
    "INNER LEAVE"
    "OUTER LEAVE"
    

代码演示链接

分析

1. 进入outer,触发outer的enter => outer enter
2. 进入inner，触发inner的enter => inner enter
3. 离开inner，触发inner的leave => inner leave
4. 离开outer，触发outer的leave => outer leave