mouseenter事件只會觸發一次,觸發對像是註冊對像或者註冊對象的子元素
mouseover事件可以觸發多次,觸發對像是註冊對像或者註冊對象的子元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <p>不論鼠標指針穿過被選元素或其子元素,都會觸發mouseover 事件。 </p> <p>只有在鼠標指針穿過被選元素時,才會觸發mouseenter 事件。 </p> <div style="background-color:lightgray;padding:20px;width:40%;float:left"> <h2 style="background-color:white;">被觸發的Mouseover 事件:<span></span></h2> </div> <div 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的區別就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。