首页 > 编程笔记 > JavaScript笔记 > jQuery事件
jQuery event对象常用属性汇总
当一个事件发生的时候,与这个事件有关的详细信息都会临时保存到一个指定的地方,这个地方就是 event 对象。每一个事件,都有一个对应的 event 对象。打个比方,我们都知道飞机都有黑匣子,每次飞机出事(一个事件)后,我们都可以从黑匣子(event 对象)中获取详细的信息。
在 jQuery 中,我们可以通过 event 对象来获取一个事件的详细信息。这里只是介绍一下常用的属性。
举例
图 1:event.type方法的效果
几乎所有的初学者(包括当年的我)都会有一个疑问:“这个 e 是什么?为什么写个 e.type 就可以获取到事件的类型呢?”实际上,每次调用一个事件的时候,jQuery 都会默认给这个事件函数加上一个隐藏的参数,这个隐藏的参数就是 event 对象。一般来说,event 对象是作为事件函数的第一个参数传入的。
其实 e 仅仅是一个变量名,它存储的是一个 event 对象。也就是说,e 换成其他名字如 ev、event、a 等都可以,大家可以测试一下。
在 JavaScript 中,event 对象在 IE8 及以下版本还存在一定的兼容性问题,可能还需要采取“var e=e||window.event;”来处理。不过 jQuery 1.12.4 版本已经完美兼容 IE6~IE8 了,所以我们不需要做兼容处理。
语法:
举例:
图 2:event.target 方法的效果
语法:
举例:
图 3:event.which 方法的效果
在这个例子中,当我们点击鼠标时,会判断你点击的是鼠标的哪一个键。
语法:
举例:
图 4:event.pageX 和 event.pageY 方法的效果
语法:
如果按下的是 shift、ctrl 和 alt 这 3 个键,我们不需要通过 keyCode 属性来获取,而是直接通过 shiftKey、ctrlKey 和 altKey 属性来获取。
举例:禁止使用 Shift、Ctrl、Alt 键
图 5:禁止使用 Shift、Ctrl、Alt 键的效果
e.keyCode 返回的是一个数字,而 e.shiftKey、e.ctrlKey、e.altKey 返回的都是布尔值(true 或 false),我们注意一下两者的区别。
举例:获取“上”“下”“左”“右”方向键
图 6:获取“上”“下”“左”“右”方向键的效果
在游戏开发中,我们一般都是通过键盘中的“↑”、“↓”、“←”、“→”以及“W”、“S”、“A”、“D”这 8 个键来控制人物行走的方向,这个技巧用得非常多。当然,以我们现在的水平,离游戏开发还很远。
在 jQuery 中,我们可以通过 event 对象来获取一个事件的详细信息。这里只是介绍一下常用的属性。
属性 | 说明 |
---|---|
type | 事件类型 |
target | 事件元素 |
which | 鼠标左、中、右键 |
pageX、pageY | 鼠标坐标 |
shiftKey | 是否按下Shift键 |
ctrlKey | 是否按下Ctrl键 |
altKey | 是否按下Alt键 |
keyCode | 键码值 |
jQuery event.type获取事件类型
在 jQuery 中,我们可以使用 event 对象的 type 属性来获取事件的类型。举例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#btn").click(function(e){ alert(e.type); //click }) }) </script> </head> <body> <input id="btn" type="button" value="按钮" /> </body> </html>预览效果如图 1 所示。
图 1:event.type方法的效果
几乎所有的初学者(包括当年的我)都会有一个疑问:“这个 e 是什么?为什么写个 e.type 就可以获取到事件的类型呢?”实际上,每次调用一个事件的时候,jQuery 都会默认给这个事件函数加上一个隐藏的参数,这个隐藏的参数就是 event 对象。一般来说,event 对象是作为事件函数的第一个参数传入的。
其实 e 仅仅是一个变量名,它存储的是一个 event 对象。也就是说,e 换成其他名字如 ev、event、a 等都可以,大家可以测试一下。
在 JavaScript 中,event 对象在 IE8 及以下版本还存在一定的兼容性问题,可能还需要采取“var e=e||window.event;”来处理。不过 jQuery 1.12.4 版本已经完美兼容 IE6~IE8 了,所以我们不需要做兼容处理。
jQuery event.target获取事件元素
在 jQuery 中,我们可以使用 event 对象的 target 属性来获取触发事件的元素。语法:
event.target
在 JavaScript 中,事件是“冒泡”的,所以 this 是可以变化的。但是 event.target 不会变化,它永远都是触发当前事件的元素。一般来说,$(this)
和$(event.target)
是等价的。举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("a").click(function(e){ var result = $(e.target).attr("href"); alert(result); return false; //阻止超链接跳转 }) }) </script> </head> <body> <a href="https://www.xinbaoku.com/" target="_blank">新宝库</a> </body> </html>预览效果如图 2 所示。
图 2:event.target 方法的效果
$(e.target).attr("href")
其实可以等价于$(this).attr("href")
。jQuery event.which获取鼠标左、中、右键
在 jQuery 中,我们可以使用 event 对象的 which 属性来获取单击事件中鼠标的左、中、右键。语法:
event.which
event.which 会返回一个数字,其中 1 表示左键,2 表示中键,3 表示右键。举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("a").mousedown(function(e){ switch(e.which){ case 1: alert("你点击的是左键");break; case 2: alert("你点击的是中键");break; case 3: alert("你点击的是右键");break; } }) }) </script> </head> <body> <a href="https://www.xinbaoku.com/" target="_blank">新宝库</a> </body> </html>预览效果如图 3 所示。
图 3:event.which 方法的效果
在这个例子中,当我们点击鼠标时,会判断你点击的是鼠标的哪一个键。
jQuery event.pageX和event.pageY获取鼠标坐标
在 jQuery 中,我们可以使用 event 对象的 pageX 和 pageY 这两个属性来分别获取鼠标相对于页面左上角的坐标。该坐标是以页面作为参考点,不随滚动条的移动而变化。语法:
event.pageX
event.pageY
举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $(document).mousemove(function(e){ var result = "鼠标坐标为:(" + e.pageX + "," + e.pageY + ")"; $("body").text(result); }) }) </script> </head> <body> </body> </html>预览效果如图 4 所示。
图 4:event.pageX 和 event.pageY 方法的效果
jQuery keyCode获取键码值
在 jQuery 中,如果我们想要获取在键盘上按下的是哪个键,可以使用 event 对象的 keyCode 属性。语法:
event.keyCode
event.keyCode 返回的是一个数值,常用的按键及对应的键码如表 2 所示。按键 | 键码 |
---|---|
W(上) | 87 |
S(下) | 83 |
A(左) | 65 |
D(右) | 68 |
↑ | 38 |
↓ | 40 |
← | 37 |
→ | 39 |
如果按下的是 shift、ctrl 和 alt 这 3 个键,我们不需要通过 keyCode 属性来获取,而是直接通过 shiftKey、ctrlKey 和 altKey 属性来获取。
举例:禁止使用 Shift、Ctrl、Alt 键
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $(document).keydown(function(e){ if (e.shiftKey || e.altKey || e.ctrlKey) { alert("禁止使用Shift、Ctrl、Alt键!") } }) }) </script> </head> <body> <div>新宝库,给你初恋般的感觉。</div> </body> </html>预览效果如图 5 所示。
图 5:禁止使用 Shift、Ctrl、Alt 键的效果
e.keyCode 返回的是一个数字,而 e.shiftKey、e.ctrlKey、e.altKey 返回的都是布尔值(true 或 false),我们注意一下两者的区别。
举例:获取“上”“下”“左”“右”方向键
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $(window).keydown(function(e){ if (e.keyCode == 38 || e.keyCode == 87) { $("span").text("上"); } else if (e.keyCode == 39 || e.keyCode == 68) { $("span").text("右"); } else if (e.keyCode == 40 || e.keyCode == 83) { $("span").text("下"); } else if (e.keyCode == 37 || e.keyCode == 65) { $("span").text("左"); } else { $("span").text(""); } }) }) </script> </head> <body> <div>你控制的方向是: <span style="color:red;"></span> </div> </body> </html>预览效果如图 6 所示。
图 6:获取“上”“下”“左”“右”方向键的效果
在游戏开发中,我们一般都是通过键盘中的“↑”、“↓”、“←”、“→”以及“W”、“S”、“A”、“D”这 8 个键来控制人物行走的方向,这个技巧用得非常多。当然,以我们现在的水平,离游戏开发还很远。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算