本文通过两个互动示例展示了onmouseenter与onmouseover事件处理程序的区别。onmouseenter事件不支持事件冒泡，而onmouseover则支持。通过计数器演示了当鼠标移过元素及其子元素时两种事件的不同行为。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: deeppink;
color: springgreen;
border: 1px solid yellow;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>
<!-- 对比onmouseover与onmouseenter的区别 -->
<!--onmouseenter 不支持冒泡-->
<div id="div1" onmouseenter="myFunc1()">
<p>onmouseenter:<br><span id="demo1">鼠标移动到这里</span></p>
</div>
<div id="div2" onmouseover="myFunc2()">
<p>onmouseover:<br><span id="demo2">鼠标移动到这里</span></p>
</div>
<script type="text/javascript">
var i = 0;
var j = 0;
function myFunc1(){
var demo1 = document.getElementById("demo1");
demo1.innerHTML = i += 1;
}
function myFunc2(){
var demo2 = document.getElementById("demo2");
demo2.innerHTML = j += 1;
}
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
