jQuery event对象常用属性汇总
当一个事件发生的时候，与这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是 event 对象。每一个事件，都有一个对应的 event 对象。打个比方，我们都知道飞机都有黑匣子，每次飞机出事（一个事件）后，我们都可以从黑匣子（event 对象）中获取详细的信息。
在 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 属性来获取触发事件的元素。
语法：
在 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="http://www.cdsy.xyz/" target="_blank">城东书院</a>
</body>
</html>
预览效果如图 2 所示。
图 2：event.target 方法的效果
$(e.target).attr("href")其实可以等价于$(this).attr("href")。
jQuery event.which获取鼠标左、中、右键
在 jQuery 中，我们可以使用 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="http://www.cdsy.xyz/" target="_blank">城东书院</a>
</body>
</html>
预览效果如图 3 所示。
图 3：event.which 方法的效果
在这个例子中，当我们点击鼠标时，会判断你点击的是鼠标的哪一个键。
jQuery event.pageX和event.pageY获取鼠标坐标
在 jQuery 中，我们可以使用 event 对象的 pageX 和 pageY 这两个属性来分别获取鼠标相对于页面左上角的坐标。该坐标是以页面作为参考点，不随滚动条的移动而变化。
语法：
event.pageY
event.pageX 表示获取鼠标相对于页面左上角的 x 轴坐标，event.pageY 表示获取鼠标相对于页面左上角的 y 轴坐标。
举例：
<!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 返回的是一个数值，常用的按键及对应的键码如表 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 个键来控制人物行走的方向，这个技巧用得非常多。当然，以我们现在的水平，离游戏开发还很远。
湘公网安备 43102202000103号