1、onmouseover瀑粥、onmouseout：鼠標經過時自身觸發(fā)事件挣跋，經過其子元素時也觸發(fā)該事件；（父親有的東西狞换，兒子也有）
2避咆、onmouseenter、onmouseleave：鼠標經過時自身觸發(fā)事件修噪，經過其子元素時不觸發(fā)該事件查库。（父親的東西就是父親的，不歸兒子所有）
這四個事件兩兩配對使用黄琼，onmouseover樊销、onmouseout一對，onmouseenter脏款、onmouseleave一對围苫，不能混合使用。
下面來看例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.f{
position: relative;
width: 200px;
height: 200px;
background-color: #56b829;
}
.son{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background-color: red;
}
</style>
</head>
<body>
<div class="f">
<div class="son"></div>
</div>
<script>
let f=document.getElementsByClassName('f')[0];
f.onmouseover=function (e) {
console.log('in',e.target);
}
f.onmouseout=function (e) {
console.log('out',e.target);
}
</script>
</body>
</html>
我們先看下圖再分析
1.gif
我們首先進入最外面的div撤师，可以看到是父div觸發(fā)了mouseover事件剂府，接著進入子div，可以看到父div觸發(fā)了mouseout事件剃盾，子div接著觸發(fā)mouseover事件腺占，然后我們從子div里面出來，可以看到子div觸發(fā)了mouseout事件痒谴，父div觸發(fā)了mouseover事件衰伯，接著我們移出鼠標，父div觸發(fā)mouseout事件.如果不想子div去觸發(fā)事件闰歪，則可以使用onmouseenter嚎研、onmouseleave。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.f{
position: relative;
width: 200px;
height: 200px;
background-color: #56b829;
}
.son{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background-color: red;
}
</style>
</head>
<body>
<div class="f">
<div class="son"></div>
</div>
<script>
let f=document.getElementsByClassName('f')[0];
f.onmouseenter=function (e) {
console.log('in',e.target);
}
f.onmouseleave=function (e) {
console.log('out',e.target);
}
</script>
</body>
</html>
2.gif
