onmouseenter 和 onmouseover 的不同

最新推荐文章于 2024-07-07 20:04:18 发布

Z_唐

最新推荐文章于 2024-07-07 20:04:18 发布

阅读量393

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/xmz1996/article/details/79024127

版权

javaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。
onmousemove 事件在鼠标移动到 div 元素上时触发。
mouseenter 事件在鼠标指针进入 div 元素时触发，唯一的区别是 onmouseenter 事件不支持冒泡。
onmouseover 事件在鼠标指针进入 div 元素时触发 ,在子元素上也会触发(p 和 span)。

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div {  
    width: 100px;  
    height: 100px;  
    border: 1px solid black;  
    margin: 10px;  
    float: left;  
    padding: 30px;  
    text-align: center;  
    background-color: lightgray;  
}  

p {  
    background-color: white;  
}  
</style>  
</head>  
<body>  

<h3>该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3>  

<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>  

<p> mouseenter 事件在鼠标指针进入 div 元素时触发。 </p>  

<p> onmouseover 事件在鼠标指针进入 div 元素时触发,唯一的区别是 onmouseenter 事件不支持冒泡 ,在子元素上也会触发(p 和 span)。</p>  

<div onmousemove="myMoveFunction()">  
  <p>onmousemove: <br> <span id="demo">鼠标移动到我这!</span></p>  
</div>  

<div onmouseenter="myEnterFunction()">  
  <p>onmouseenter: <br> <span id="demo2">标移动到我这!</span></p>  
</div>  

<div onmouseover="myOverFunction()">  
  <p>onmouseover: <br> <span id="demo3">标移动到我这!</span></p>  
</div>  

<script>  
x = 0;  
y = 0;  
z = 0;  

function myMoveFunction() {  
    document.getElementById("demo").innerHTML = z+=1;  
}  

function myEnterFunction() {  
    document.getElementById("demo2").innerHTML = x+=1;  
}  

function myOverFunction() {  
    document.getElementById("demo3").innerHTML = y+=1;  
}  
</script>  

</body>  
</html>