1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
这四个事件两两配对使用，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触发了mouseover事件，接着进入子div，可以看到父div触发了mouseout事件，子div接着触发mouseover事件，然后我们从子div里面出来，可以看到子div触发了mouseout事件，父div触发了mouseover事件，接着我们移出鼠标，父div触发mouseout事件.如果不想子div去触发事件，则可以使用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
网友评论