鼠标进入和离开元素事件
前面讲过，鼠标进入元素和离开元素事件有 4 种： mouseenter\mouseleave\mousemove\mouseout。
mouseenter 和 mouseleave
这四种事件到底有什么区别呢？我们先来试一下mouseenter和mouseleave事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<style>
.outer {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: brown;
}
.inner {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: cornflowerblue;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
<script>
var outer = document.querySelector(".outer");
var inner = document.querySelector(".inner");
inner.onmouseenter = function(event) {
console.log("鼠标进入了inner元素");
};
outer.onmouseenter = function(event) {
console.log("鼠标进入了outer元素");
};
inner.onmouseleave = function(event) {
console.log("鼠标离开了inner元素");
};
outer.onmouseleave = function(event) {
console.log("鼠标离开了outer元素");
};
</script>
|
反复进入outer和inner元素后，可以发现：
- 只有鼠标从外部进入元素内部才会触发
mouseenter事件
- 鼠标从
outer进入inner元素时，触发了inner元素的mouseenter事件，该事件没有冒泡
- 鼠标从内部离开元素时，才会触发
mouseleave事件
- 鼠标离开
inner元素时，触发了inner元素的mouseleave事件，但该事件没有冒泡
mouseover 事件
再来试一下mouseover:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<style>
.outer {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: brown;
}
.inner {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: cornflowerblue;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
<script>
var outer = document.querySelector(".outer");
var inner = document.querySelector(".inner");
inner.onmouseover = function(event) {
console.log("鼠标进入了inner元素");
};
outer.onmouseover = function(event) {
console.log("鼠标进入了outer元素");
};
</script>
|
反复在body/outer/inner元素上进进出出后发现：
- 不管从
body进入.outer,还是从inner进入outer都会触发outer的mouseover事件
- 从
outer进入inner元素时，触发了inner元素的mouseover事件，且该事件发生了向上冒泡的现象，也就是说在函数执行后，又接着触发了 outer元素的mouseover事件。
mouseout 事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<style>
.outer {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: brown;
}
.inner {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: cornflowerblue;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
<script>
var outer = document.querySelector(".outer");
var inner = document.querySelector(".inner");
inner.onmouseout = function(event) {
console.log("鼠标离开了inner元素");
};
outer.onmouseout = function(event) {
console.log("鼠标离开了outer元素");
};
</script>
|
反复进出后可以发现：
- 不管鼠标从
outer进入body，还是进入inner元素，都触发了outer元素的mouseout事件
- 鼠标离开
inner元素时，触发了inner元素的mouseout事件，又向上冒泡，触发了outer元素的mouseout事件
这样就够了吗？ 我们再看一个案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<style>
.outer {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: brown;
}
.inner1 {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: cornflowerblue;
}
.inner2 {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: rgb(76, 214, 129);
}
p {
background-color: darkcyan;
}
</style>
<div class="outer">
<div class="inner1">
<p>p element</p>
</div>
<div class="inner2"></div>
</div>
<script>
var outer = document.querySelector(".outer");
var inner = document.querySelector(".inner");
outer.onmouseover = function(event) {
console.log("鼠标进入了outer元素或者它的子元素", event.target);
};
outer.onmouseout = function(event) {
console.log("鼠标离开了outer元素或者它的子元素", event.target);
};
</script>
|
在页面中反复移动鼠标后，我们发现：
- 鼠标进入元素或者元素的某个后代元素时，总是会触发元素的进入事件，
- 元素离开元素或者元素的某个后代元素时，总会触发元素的离开事件
- 当鼠标在元素的子元素之间移动时，总会先触发离开事件，再触发进入事件
- 可以通过
event.target来获取鼠标离开或者进入的实际元素
总结
现在可以总结一下mouseenter/mouseleave与mouseover/mouseout的区别了
mouseenter/mouseleave不会向上冒泡，而mouseover/mouseout会自动向上冒泡mouseenter/mouseleave只会在鼠标从外部进入元素本身，或着鼠标向外离开元素本身时触发；鼠标进入元素本身或者元素的后代元素时都会触发元素的mouseover事件，鼠标离开元素本身或者元素的后代元素时都会触发元素的mouseout事件，- 当鼠标在元素的后代元素之间移动时，总会先触发
mouseout事件，再触发mouseover事件