JavaScript中的mouseover与mouseenter,mouseout和mouseleave的区别

1、mouseover与mouseenter

      mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。

      mouseenter事件:只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

简单写个例子:

[html]  view plain  copy
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Documenttitle>  
  6.     <style>  
  7.         .over{  
  8.             background-color: #66d3ff;  
  9.             width:400px;  
  10.             float:left;  
  11.             padding: 10px 10px;  
  12.         }  
  13.         .enter{  
  14.             background-color: #66d3ff;  
  15.             width:400px;  
  16.             float:left;  
  17.             margin-left:30px;  
  18.             padding: 10px 10px;  
  19.         }  
  20.         h2{  
  21.             background-color: #fff;  
  22.             padding: 5px 5px;  
  23.         }  
  24.     style>  
  25. head>  
  26. <body>  
  27. <p>mouseover 事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。p>  
  28. <p>mouseenter 事件:只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。p>  
  29. <div class="over">  
  30.     <h2>被触发的 Mouseover 事件次数:<span>span>h2>  
  31. div>  
  32. <div class="enter">  
  33.     <h2>被触发的 Mouseenter 事件次数:<span>span>h2>  
  34. div>  
  35. <script>  
  36.     var x = 0,y = 0;  
  37.     var div1 = document.getElementsByClassName("over")[0];  
  38.     div1.addEventListener("mouseover",function(){  
  39.         var span = this.getElementsByTagName("span")[0];  
  40.         span.innerText = (x +=1);  
  41.     },false);  
  42.   
  43.     var div2 = document.getElementsByClassName("enter")[0];  
  44.     div2.addEventListener("mouseenter",function(){  
  45.         var span = this.getElementsByTagName("span")[0];  
  46.         span.innerText = (y +=1);  
  47.     },false);  
  48. script>  
  49. body>  
  50. html>  
效果:

JavaScript中的mouseover与mouseenter,mouseout和mouseleave的区别_第1张图片

2、mouseout与mouseleave

     mouseout事件:不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

     mouseleave事件:只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

简单写个例子:

[html]  view plain  copy
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Documenttitle>  
  6.     <style>  
  7.         .over{  
  8.             background-color: #66d3ff;  
  9.             width:400px;  
  10.             float:left;  
  11.             padding: 10px 10px;  
  12.         }  
  13.         .enter{  
  14.             background-color: #66d3ff;  
  15.             width:400px;  
  16.             float:left;  
  17.             margin-left:30px;  
  18.             padding: 10px 10px;  
  19.         }  
  20.         h2{  
  21.             background-color: #fff;  
  22.             padding: 5px 5px;  
  23.         }  
  24.     style>  
  25. head>  
  26. <body>  
  27. <p> mouseout事件:不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。p>  
  28. <p> mouseleave事件:只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。p>  
  29. <div class="over">  
  30.     <h2>被触发的 mouseout 事件次数:<span>span>h2>  
  31. div>  
  32. <div class="enter">  
  33.     <h2>被触发的 mouseleave 事件次数:<span>span>h2>  
  34. div>  
  35. <script>  
  36.     var x = 0,y = 0;  
  37.     var div1 = document.getElementsByClassName("over")[0];  
  38.     div1.addEventListener("mouseout",function(){  
  39.         var span = this.getElementsByTagName("span")[0];  
  40.         span.innerText = (x +=1);  
  41.     },false);  
  42.   
  43.     var div2 = document.getElementsByClassName("enter")[0];  
  44.     div2.addEventListener("mouseleave",function(){  
  45.         var span = this.getElementsByTagName("span")[0];  
  46.         span.innerText = (y +=1);  
  47.     },false);  
  48. script>  
  49. body>  
  50. html>  
效果:

JavaScript中的mouseover与mouseenter,mouseout和mouseleave的区别_第2张图片


转载

 https://blog.csdn.net/u010297791/article/details/57412796

你可能感兴趣的:(编程学习记录)