onmouseenter和onmouseover

老师，onmouseenter和onmouseover,onmouseleave和onmouseout 她们有什么区别呢

月入过亿 2022-09-19

源自：DOM 4-9 编程练习

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2022-09-19 17:42:53

同学你好，区别就是onmouseover和onmouseout存在事件冒泡，而onmouseenter和onmouseleve不只是事件冒泡，可以自己书写代码测试下，下面以鼠标移入事件为例：

<!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>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 50px;
float: left;
padding: 50px;
text-align: center;
color:#fff;
background-color: pink;
}

p {
background-color: green;
}
</style>

<div id="box1">
<p>onmouseenter: <br> <span id="enter">0</span></p>
</div>

<div id="box2">
<p>onmouseover: <br> <span id="over">0</span></p>
</div>

<script>
var x = 0;
var y = 0;
document.getElementById('box1').onmouseenter=function(){
document.getElementById("enter").innerHTML = ++x;
}
document.getElementById('box2').onmouseover=function(){
document.getElementById("over").innerHTML = ++y;
}
</script>
</body>
</html>

当把鼠标放到span处，onmouseenter下面的数字不会加1，而onmouseover会，可见onmouseover支持事件冒泡，在移入span元素时，事件会向上冒泡触发div元素绑定的鼠标移入事件。

有关事件冒泡，在后面的课程中也会有介绍，这里先了解下，等学到了再返回来回顾下，会更加容易理解。

祝学习愉快~

收起回答