浅谈JQ中mouseover和mouseenter的区别
mouseenter事件只会触发一次，触发对象是注册对象或者注册对象的子元素
mouseover事件可以触发多次，触发对象是注册对象或者注册对象的子元素
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。</p>
<divclass="over"style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2style="background-color:white;">被触发的Mouseover事件：<span></span></h2>
</div>
<divclass="enter"style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2style="background-color:white;">被触发的Mouseenter事件：<span></span></h2>
</div>
<script>
varx=0,y=0;
vardiv1=document.getElementsByClassName("over")[0];
div1.addEventListener("mouseover",function(){
varspan=this.getElementsByTagName("span")[0]
span.innerText=(x+=1);
span.style.cssText="border:2pxredsolid;";
},false);
vardiv2=document.getElementsByClassName("enter")[0];
div2.addEventListener("mouseenter",function(){
varspan=this.getElementsByTagName("span")[0]
span.innerText=(y+=1);
span.style.cssText="border:2pxredsolid;";
},false);
</script>
</body>
</html>
以上这篇浅谈JQ中mouseover和mouseenter的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。