文章目录
两者定义两两区别例子小结两者定义
mouseover：鼠标覆盖
mouseenter：鼠标进入
mouseleave：鼠标移出
mouseout：鼠标移出
两两区别
既会捕获也会冒泡mouseover鼠标指针穿过被选元素或是其子元素都会触发
mouseout鼠标指针移出被选元素或是其子元素都会触发只会捕获不会冒泡
mouseenter只有鼠标指针穿过被选元素才会触发
mouseleave只有鼠标指针移出被选元素才会触发
例子
我们同时对大div加上这四个属性，然后从左向右移动鼠标
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>#big{height: 500px;width: 500px;background-color: aqua;margin:auto;}#small{height: 200px;width: 200px;background-color: rgb(36, 37, 37);margin:auto;}</style><body><div id="big"><div id="small"></div></div><script>let big=document.getElementById('big')big.onmouseover=function(){console.dir('mouseover')}big.onmouseout=function(){console.dir('mouseout')}big.onmouseenter=function(){console.dir('mouseenter')}big.onmouseleave=function(){console.dir('mouseleave')}</script></body></html>
我们对鼠标移动的四个交叉点进行标记
效果展示：
在一号节点鼠标进入选中元素触发了：
mouseover
mouseenter
在二号节点鼠标离开选中元素并进入选中元素的子元素触发了：
mouseout
mouseover
在三号节点鼠标离开选中元素的子元素并进入选中元素触发了：
mouseout
mouseover
在四号节点鼠标离开选中元素触发了：
mouseout
mouseleave
小结
mouseover与mouseout成对，mouseenter与mouseleave成对简记：两个后面含o的一对是全能；两个后面含se的一队只会一半。
mouseover触发优先级高于mouseenter，mouseout触发优先级高于mouseleave
简记：先离开后进入
