两者定义
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
简记:先离开后进入