当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。每一个事件，都有一个对应的event对象。给大家打个比喻，我们都知道飞机都有黑匣子，对吧？每次飞机出事（一个事件）后，我们都可以从黑匣子（event对象）中获取详细的信息。

在jQuery中，我们可以通过event对象来获取一个事件的详细信息。这里只是介绍一下常用的属性，更深入的内容可以关注JavaScript进阶教程。

event对象的属性
属性 说明
type 事件类型
target 事件元素
which 鼠标左、中、右键
pageX、pageY 鼠标坐标
shiftKey 是否按下shift键
ctrlKey 是否按下ctrl键
altKey 是否按下alt键
keyCode 键码值

一、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>

浏览器预览效果如下图所示。

分析：

几乎所有的初学者（包括当年的我）都会有一个疑问：“这个e是什么来的？为什么写个e.type就可以获取到事件的类型呢？”

实际上，每次调用一个事件的时候，jQuery都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。一般来说，event对象是作为事件函数的第一个参数传入的。

其实e仅仅是一个变量名，它存储的是一个event对象。也就是说，e可以换成其他名字如ev、event、a等都可以的，大家可以测试一下。

在JavaScript中，event对象在IE8及以下版本还有一定的兼容性，可能还需要采取“var e=e||window.event;”来处理。不过jQuery1.12.4版本已经完美兼容IE6~IE8了，所以我们不需要做兼容处理。

二、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="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</body>
</html>

浏览器预览效果如下图所示。

分析：

$(e.target).attr("href")其实可以等价于$(this).attr("href")。

三、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="http://www.lvyestdy.com" target="_blank">绿叶学习网</a>
</body>
</html>

浏览器预览效果如下图所示。

分析：

在这个例子中，当我们点击鼠标时，会判断你点击的是鼠标的哪一个键。

四、event.pageX和event.pageY

在jQuery中，我们可以使用event对象的pageX和pageY这两个属性来分别获取鼠标相对于页面左上角的坐标。该坐标是以页面作为参考点，不随滚动条移动而变化。

语法：

event.pageX
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>

浏览器预览效果如下图所示。

五、keyCode

在jQuery中，如果我们想要获取按下键盘的是哪个键，可以使用event对象的keyCode属性来获取。

语法：

event.keyCode

说明：

event.keyCode返回的是一个数值，常用的按键及对应的键码如下表所示。

常用的按键及对应的键码
按键 键码
W（上） 87
S（下） 83
A（左） 65
D（右） 68
↑ 38
↓ 40
← 37
→ 39

如果是shift、ctrl和alt这3个键，我们不需要通过keyCode属性来获取，而是可以直接通过shiftKey、ctrlKey和altKey属性来获取。

举例：禁止Shfit、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>

浏览器预览效果如下图所示。

分析：

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>

浏览器预览效果如下图所示。

分析：

在游戏开发中，我们一般都是通过键盘中的↑、↓、←、→以及W、S、A、D这8个键来控制人物行走的方向，这个技巧用得非常多。当然，以我们现在的水平，离游戏开发还很远呢。有兴趣的小伙伴可以看看《从0到1：HTML5 Canvas动画开发》一书。