获取键盘控制事件是实现交互性最有力的方法之一
首先需要了解的是如何初始化该事件基本语句如下
documentonkeydown = keyDown
当浏览器读到这个语句时无论按下键盘上的哪个键都将呼叫KeyDown()函数
捕获键盘事件对于不同的浏览器来说有点困难我们分别的来学习不同浏览器的实现语句
Netscape
Netscape的程序实现要比IE麻烦你必须放一个特别的语句来使Netscape始终去检查击键事件如果没有这行语句击键事件将与按下鼠标事件搞混特别语句如下
documentonkeydown = keyDown
if (ns) documentcaptureEvents(EventKEYDOWN)
keyDown()函数有一个隐藏的变量一般的我们使用字母e来表示这个函数
function keyDown(e)
变量e表示发生击键事件寻找是哪个键被按下使用以下属性
ewhich
这将给出该键的索引值把索引值转化成该键的字母或数字值写
StringfromCharCode(ewhich)
把上面的语句放在一起我们可以知道被按下的是哪一个键
function keyDown(e) {
var keycode = ewhich
var realkey = StringfromCharCode(ewhich)
alert(keycode: + keycode + realkey: + realkey)
}
documentonkeydown = keyDown
documentcaptureEvents(EventKEYDOWN)
Internet Explorer
IE的程序与Netscape类似但它不需要e变量用windoweventkeyCode来代替ewhich把键的索引值转化为真实键值方法类似StringfromCharCode(eventkeyCode)程序如下
function keyDown() {
var keycode = eventkeyCode
var realkey = StringfromCharCode(eventkeyCode)
alert(keycode: + keycode + realkey: + realkey)
}
documentonkeydown = keyDown
documentonkeydown = keyDown
适用于两者的程序
用两种浏览器检查上述实例你会发现执行结果不总是一样的这是因为两种浏览器的键盘代码设置不相同因此你必须使用单独的代码分别来写这段程序而毫无别法
建议你要完全忘掉实际的键值仅仅使用键盘的代码值来工作下面这段程序将视情况而设置如果是用IE的话ieKey生效把nKey设为如果是用Netscape的话nKey生效把nKey设为然后用一个警示框来显示两者的值
function keyDown(e) {
if (ns) {
var nKey=ewhich;
var ieKey=
}
if (ie) {
var ieKey=eventkeyCode;
var nKey=
}
alert(nKey:+nKey+ ieKey: + ieKey)
}
documentonkeydown = keyDown
if (ns) documentcaptureEvents(EventKEYDOWN)
使用键盘移动对象
下面的程序实现用键盘移动对象程序将检查哪一个键被按下从而调用相应的函数来移动对象本例中当字母A被按下时对象就开始移动字母A键在nKey中的值是ieKey的值为在程序中将分别检查这两个值
function init() {
if (ns) block = documentblockDiv
if (ie) block = blockDivstyle
blockxpos = parseInt(blockleft)
documentonkeydown = keyDown
if (ns) documentcaptureEvents(EventKEYDOWN)
}
function keyDown(e) {
if (ns) { var nKey=ewhich; var ieKey= }
if (ie) { var ieKey=eventkeyCode; var nKey= }
if (nKey== || ieKey==) { // 如果A键按下
slide()
}
}
function slide() {
blockxpos +=
blockleft = blockxpos
status = blockxpos // 这一句不一定需要只是为了检查状态
setTimeout(slide())
}
增加 Active变量
上面程序稍微有些不足对象移动以后就无法使它停止了而且当你多按几次Ａ键时物体将运动得越来越快这里我们来修补它
使用变量active来改变这种情况插入if语句来检查函数是否重复
function slide() {
if (myobjactive) {
myobjxpos +=
myojbleft = myobjxpos
setTimeout(slide())
}
}
在这种情况中slide()函数只有在myobjactive值为真的时候才会工作当myobjactive值为假时对象将停止移动
使用 onKeyUp 和 Active 变量
onkeyup事件和onkeydown事件工作原理相同用以下语句初始化该事件:
documentonkeydown = keyDown
documentonkeyup = keyUp
if (ns) documentcaptureEvents(EventKEYDOWN | EventKEYUP)
keyUp() 函数与之相同当一个键被放开时事件被激发对象停止移动并将active变量置为
function keyUp(e) {
if (ns) var nKey = ewhich
if (ie) var ieKey = windoweventkeyCode
if (nKey== || ieKey==)
blockactive = false
}
下面是比较完整的程序
function init() {
if (ns) block = documentblockDiv
if (ie) block = blockDivstyle
blockxpos = parseInt(blockleft)
blockactive = false
documentonkeydown = keyDown
documentonkeyup = keyUp
if (ns) documentcaptureEvents(EventKEYDOWN | EventKEYUP)
}
function keyDown(e) {
if (ns) {var nKey=ewhich; var ieKey=}
if (ie) {var ieKey=eventkeyCode; var nKey=}
if ((nKey== || ieKey==) && !blockactive) { // if A key is pressed
blockactive = true slide()
}
}
function keyUp(e) {
if (ns) {var nKey=ewhich; var ieKey=}
