首页 > 代码库 > JS之mouseover和mouseenter
JS之mouseover和mouseenter
mouseenter事件只会触发一次,触发对象是注册对象或者注册对象的子元素
mouseover事件可以触发多次,触发对象是注册对象或者注册对象的子元素
<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>
JS之mouseover和mouseenter
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。