事件参数对象下的几个属性 mouseenter与mouseover的区别
生活随笔
收集整理的這篇文章主要介紹了
事件参数对象下的几个属性 mouseenter与mouseover的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
事件參數對象下的幾個屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: yellow;}p {width: 100px;height: 20px;background-color: pink;}</style><script src="jquery-1.12.1.js"></script><script>// e.target這個屬性得到的是觸發該事件的目標對象,此時是一個DOM對象// e.currentTarget這個屬性得到的是觸發該事件的當前的對象// e.delegateTarget這個屬性得到的是代理這個對象// $(function(){ // // 事件參數對象// $("#dv").click(function(e){// // console.log("哈哈");// // 得到的是觸發該事件的目標對象// console.log("div被點了");// // console.log(e.target.id);// console.log($(e.target).attr("id"));// });// $("p").click(function(){// console.log("p被點擊了");// // return false;// });// });$(function(){ // 事件參數對象$("#dv").click(function(e){console.log("div被點了");// console.log(e.currentTarget.id);// console.log($(e.currentTarget).attr("id"));// console.log(e);console.log(e.screenX + "====" + e.screenY);});$("p").click(function(){console.log("p被點了");});});</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"><p id="p1">這是一個p</p> </div></body> </html>mouseenter與mouseover的區別
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>x=0;y=0;$(document).ready(function(){$("div.over").mouseover(function(){$(".over span").text(x+=1);});$("div.enter").mouseenter(function(){$(".enter span").text(y+=1);});});</script> </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> </body> </html>?
總結
以上是生活随笔為你收集整理的事件参数对象下的几个属性 mouseenter与mouseover的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript中替换字符串中的所有
- 下一篇： 课程介绍 复习 创建对象的三种方式 自定