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

在JavaScript中，我们可以通过event对象来获取一个事件的详细信息。这里只是介绍一下常用的属性，更深入的内容我们在JavaScript进阶中再详细讲解。其中event对象常用属性如表所示

event对象的属性
属性 说明
type 事件类型
keyCode 键码值
shiftKey 是否按下shift键
ctrlKey 是否按下Ctrl键
altKey 是否按下Alt键

一、type

在JavaScript中，我们可以使用event对象的type属性来获取事件的类型。

举例：

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function (e) 
            {
                alert(e.type);
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮" />
</body>
</html>

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

分析：

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

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

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

event对象在IE8及以下版本还有一定的兼容性，可能还需要采取“var e=e||window.event;”来处理。不过随着IE退出历史舞台，这些兼容性问题我们慢慢可以不用管了，这里简单了解一下就行。

二、keyCode

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

语法：

event.keyCode

说明：

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

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

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

举例：禁止shfit、alt、ctrl键

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            document.onkeydown = function (e) {
                if (e.shiftKey || e.altKey || e.ctrlKey) {
                    alert("禁止使用shift、alt、ctrl键！")
                }
            }
        }
    </script>
</head>
<body>
    <p> 鱼对水说：你看不见我的眼泪，因为我在水中。<br/>水对鱼说；我能感觉到你的眼泪，因为你在我心中。 </p>
</body>
</html>

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

分析：

e.keyCode返回的是一个数字，而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值（true或false），我们注意一下两者的区别。

举例：获取“上下左右”方向键

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oSpan= document.getElementsByTagName("span")[0];
            window.addEventListener("keydown", function (e) 
            {
                if (e.keyCode == 38 || e.keyCode == 87) {
                    oSpan.innerHTML = "上";
                } else if (e.keyCode == 39 || e.keyCode == 68) {
                    oSpan.innerHTML = "右";
                } else if (e.keyCode == 40 || e.keyCode == 83) {
                    oSpan.innerHTML = "下";
                } else if (e.keyCode == 37 || e.keyCode == 65) {
                    oSpan.innerHTML = "左";
                } else {
                    oSpan.innerHTML = "";
                }
            }, false)
        }
    </script>
</head>
<body>
    <div>你控制的方向是：<span style="font-weight:bold;color:hotpink;"></span></div>
</body>
</html>

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

分析：

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