开发者学堂课程【jQuery 开发教程：jQuery_事件对象】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4289
jQuery_事件对象
一、概要
1、 event.currentTarget ：
当前事件的监听者
2、 event.target ：
当前事件的目标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
// 引入 jQuery
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
<div>
<p>Click me</p>
</div>
<script>
$(function(){
// 选中 div ，添加点击事件
$("div").on("click",function(e){
// 打印内容
console.log($(e.currentTarget));//div 事件的监听者
console.log($(e.target));//p 事件的目标
console.log($(this));
})
})
</script>
</body>
</html>
效果截图：
打开后台 Console ，点击标签，15行打印的是 div ，16行打印的是 p 标签，17行打印的也是一个 div 。
3、 event.delegateTarget ：
当前事件的委托者
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
// 引用 jQuery
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
<div>
<p>click me</p>
</div>
<script>
$(function(){
// 选中 div ，绑定 on 事件
$("div").on("click","p",function(e){
// 打印当前对象使用指针的内容
console.log($(this).html());
// 添加样式
($(e.delegateTarget)).css("border","1px solid red");
})
})
</script>
</body>
</html>
效果截图：
打开后台，点击标签，打印的是它的内容，会出现一个红色的边框。
4、 event.pageX ：
鼠标相当于文档左边缘的位置
5、 event.pageY ：
鼠标相当于文档上边缘的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
// 引用jQuery
<script src="jquery-2.2.1.min.js"></script>
<style>
#log{
width: 300px;
height: 300px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="log"></div>
<script>
$(function(){
// 给鼠标移动事件
$("#log").on("mousemove",function(e){
// 打印
console.log("pagex="+e.pageX+" pagey"+e.pageY);
})
})
</script>
</body>
</html>
效果截图：
打开后台，鼠标在方块内移动，就会看到会打印出 pagex和
pagey。
6、 event.type ：
获取当前的事件类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
// 引用 jQuery
<script src="jquery-2.2.1.min.js"></script>
<style>
#log{
width: 300px;
height: 300px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="log"></div>
<script>
$(function(){
$("#log").on("click",function(e){
console.log("pagex="+e.pageX+" pagey"+e.pageY);
alert(e.type);
})
})
</script>
</body>
</html>
效果截图：
在方块内点击会弹出窗口。
7、 event.preventDefault() ：
阻止默认事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
// 引用 jQuery
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
// 跳转到百度
<a href="http://www.baidu.com">baidu</a>
<script>
$(function(){
$("a").click("click",function(e){
e.preventDefault();
alert("haha");
})
})
</script>
</body>
</html>
效果截图：
点击标签会弹出窗口，如果不阻止会跳转到百度页面。
8、 event.stopPropagation() ：
阻止冒泡事件，用法与7类似。