mouseenter、mouseleave、mouseover、mouseout理解

前言

由于用到这几个事件，记录一下这几个事件的测试结果。

元素内无子元素

  <div id="a1" style="border: 1px solid #666;width:300px;height: 200px;border-right:none">
    aaaaaa
  </div>
 <div id="b1" style="border: 1px solid #666;width:300px;height: 200px;border-right:none">
    bbbbbbb
  </div>

    let aoutdiv = document.getElementById("a1")
	let boutdiv = document.getElementById("b1")
	aoutdiv.addEventListener('mouseenter',function(e){
		console.log('a--enter')
	})
	aoutdiv.addEventListener('mouseleave',function(e){
		console.log('a--leave')
	})
	
	boutdiv.addEventListener('mouseover',function(e){
		console.log('b--over')
	})
	boutdiv.addEventListener('mouseout',function(e){
		console.log('b--out')
	})

测试结果：完全一样

元素内有子元素

  <div id="a1" style="border: 1px solid #666;width:300px;height: 200px;border-right:none">
    a外层
    <div id="a2" style="border: 1px solid red;">a内层</div>
  </div>
 <div id="b1" style="border: 1px solid #666;width:300px;height: 200px;border-right:none">
 b外层
    <div id="b2" style="border: 1px solid red;">b内层</div>
  </div>

测试结果：

总结

mouseenter、mouseleave不管有没有子元素，只执行一次【进入该区域和退出该区域】
mouseover、mouseout有子元素时，鼠标在子元素和父元素其他区域都会触发