mouseover和mouseenter两个事件有什么区别？

首先回忆下鼠标事件有哪些：

• mouseup：鼠标按下
• mousedown：鼠标放开
• mouseover：鼠标进入
• mouseout：鼠标离开
• mouseenter：鼠标进入
• mouseleave：鼠标离开
• mousemove：鼠标移动

那么mouseenter和mouseover的区别呢？？

demo1：

html部分：

<button onmouseover=‘myMouseOver’  onmouseout=\'myMouseOut\'>click Me one</button>

<button onmouseenter=‘myMouseEnter’  onmouseleave=\'myMouseLeave\'>click Me two</button>

js部分：

function myMouseOver(){
  console.log(\'--------over\')  
}

function myMouseOut(){
  console.log(\'--------out\')  
}

function myMouseEnter(){
  console.log(\'--------enter\')  
}

function myMouseLeave(){
  console.log(\'--------leave\')  
}

上面例子可以看出：mouseover和mouseenter没有区别。下面再看

demo2：

html部门分:

<div style=\'width:200px;height:50px;background:red;\' onmouseover=‘myMouseOver’  onmouseout=\'myMouseOut\'>
　　<button>click Me one</button>
</div>

<div style=\'width:200px;height:50px;background:blue;\' onmouseenter=‘myMouseEnter’  onmouseleave=\'myMouseLeave\'>
　　<button>click Me two</button>
</div>

js部分不变，同demo1

结果：

绿色进入红色：--------over

红色进入按钮one：--------out  --------over

按钮one进入红色：--------out  --------over

红色进入绿色：--------out

 

绿色进入蓝色：--------enter

红色进入按钮two：

按钮one进入红色：

红色进入绿色：--------leave