开发者学堂课程【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类似。
