onmouseenter 和 onmouseover 的不同，innerHTML

59 阅读 0 评论 39 点赞

我是靠谱客的博主玩命心锁，最近开发中收集的这篇文章主要介绍onmouseenter 和 onmouseover 的不同，innerHTML，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

[html] 
view plain 
copy 


 <!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>  