事件对象
1、event.currentTarget 事件的监听者
2、event.target 事件的目标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery.js"></script>
<style>
p{
width: 100px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p>click me </p>
</div>
</body>
<script>
$(function(){
$("div").on("click",function(e){
console.log($(e.currentTarget));
console.log($(e.target));
})
})
</script>
</html>
效果
$(function(){
$("div").on("click",function(e){
console.log($(e.currentTarget)); //div 事件的监听者
console.log($(e.target)); //p 事件的目标
console.log($(this));
})
})
3、event.delegateTarget 事件的委托者
绑定了当前正在调用jQuery事件处理器的元素，也就是说表示的是当前事件的委托者
<script>
$(function(){
$("div").on("click","p",function(e){
console.log($(this).html());
})
})
</script>
用on实现一个事件委托的效果
<script>
$(function(){
$("div").on("click","p",function(e){
console.log($(this).html());
console.log($(e.delegateTarget)); //指向当前事件的委托者，从代码中可以看到是div
})
})
</script>
给事件委托者添加样式
$(function(){
$("div").on("click","p",function(e){
console.log($(this).html());
($(e.delegateTarget)).css("border","1px solid red");
})
})
</script>
4、event.pageX
X是鼠标相对于文档左边缘的位置
5、event.pageY
Y是鼠标相对于文档上边缘的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery.js"></script>
<style>
#log{
width: 300px;
height: 300px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id ="log">
<p>click me </p>
</div>
</body>
<script>
$(function(){
$("#log").on("mousemove",function(e){
console.log("pagex="+e.pageX+"pagey="+e.pageY)
})
})
</script>
</html>
效果
6、event.type 当前事件类型
<script>
$(function(){
$("#log").on("mousemove",function(e){
console.log("pagex="+e.pageX+"pagey="+e.pageY)
alert(e.type);
})
})
</script>
7、event.preventDefault() 阻止默认事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery.js"></script>
</head>
<body>
<a href="http://www.baidu.com"></a>
</body>
<script>
$(function(){
$("a").click(function(e){
e.preventDefault();
alert("hahah");
})
})
</script>
</html>
会发现点击后没有跳转到百度页面
注释后会发现点击后跳转到百度页面
