事件参数对象下的几个属性
<!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>