当一个事件发生的时候,这个事件有关的详细信息都会临时保存到一个指定的地方,这个地方就是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动画开发》。