浅谈JQ中mouseover和mouseenter的区别

2019-11-20 09:00:57

字体：大中小

来源：转载

供稿：网友

mouseenter事件只会触发一次，触发对象是注册对象或者注册对象的子元素

mouseover事件可以触发多次，触发对象是注册对象或者注册对象的子元素

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body>  <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>   <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>   <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">     <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>   </div>   <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">       <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>   </div>   <script>    var x = 0,y = 0;    var div1 = document.getElementsByClassName("over")[0];    div1.addEventListener("mouseover",function(){      var span = this.getElementsByTagName("span")[0]      span.innerText = (x +=1);      span.style.cssText = "border:2px red solid;";    },false);        var div2 = document.getElementsByClassName("enter")[0];    div2.addEventListener("mouseenter",function(){      var span = this.getElementsByTagName("span")[0]      span.innerText = (y +=1);      span.style.cssText = "border:2px red solid;";    },false);  </script></body></html>

以上这篇浅谈JQ中mouseover和mouseenter的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：js实现表单及时验证功能用户信息立即验证

下一篇：浅谈JS的基础类型与引用类型