一个JS FILE中的多个keyup事件

Question

我的HTML网页有一个JS文件.我想要检查4件事.如果他们按键盘上的数字1-4,则将它们带到指定的URL.该脚本有效,但只有我有一个.

当我将所有4个事件放在js文件中时,只有最后一个/最近的事件有效.是否存在某种语法,我正在做错,这会阻止它们中的所有4个工作？

为了进一步说明,使用此代码,只运行脚本的这一部分:

//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";

JS:

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
}
//If they hit keypad number 2
document.body.onkeyup = function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
}
//If they hit keypad number 3
document.body.onkeyup = function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
}
//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Answer 1

如果你将所有条件都放在同一个函数中,它将会很有效.否则,您每次都会覆盖您的功能.这就是为什么你遇到的问题,唯一的工作是最后一个.最后,尝试使用if然后else if.否则,您将无缘无故地每次验证每个条件.

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
    else if(e.keyCode == 50){
        window.location.href = "foo";
    }
    else if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
    else if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Answer 2

可以用这种方式解释这种行为:您要做的是为onkeyup事件分配一个函数.这与使用变量时的方式相同.让我们说吧

var key = 1; 

是一个"简化"的代码

document.body.onkeyup = function(e){
  // action for keypad 1
}

然后,在为您分配另一个事件处理功能时onkeyup,您正在这样做

key = 2;

问自己一个问题:变量是否key成立1？不,这被上述声明所覆盖.现在key举行2.这1是"迷失".这就是为什么只执行最后一个事件处理程序(用于键盘4)的原因.最后一项任务已覆盖先前的任务.

要解决此问题,您有两种选择:

1. 将事件操作分组到一个函数中
2. 使用 EventTarget.addEventListener

使用选项1,您可以将操作分组到一个函数中,如下面的交互式示例所示:

// input acts as your document.body
const inp = document.getElementById('foo');

inp.onkeyup = function(e) {
  if(e.keyCode == 49) {
    console.log('pressed keyCode 49'); // press 1
  }
  else if(e.keyCode == 50) {
    console.log('pressed keyCode 50'); // press 2
  }
  else if(e.keyCode == 51) {
    console.log('pressed keyCode 51'); // press 3
  }
  else if(e.keyCode == 52) {
    console.log('pressed keyCode 52'); // press 4
  }
};

<input id="foo" type="text" placeholder="type something">

但有时候这并不灵活.也许你想对keyup事件有两个不同的动作.当然你可以在一个函数中对它进行分组,但是如果另一个js文件覆盖了该函数呢？还是js文件中的另一个片段？那没有效果.

为了防止这种情况,您可以使用选项2:.addEventListener这是一种更强大的方法.以下是一个交互式示例:

// input acts as your document.body
const inp = document.getElementById('foo');

inp.addEventListener('keyup', function(e) {
  if(e.keyCode == 49) {
    console.log('first function: keyCode 49'); // press 1
  }
}); 
inp.addEventListener('keyup', function(e) {
  if(e.keyCode == 50) {
    console.log('second function: keyCode 50'); // press 2
  }
});

<input id="foo" type="text" placeholder="type something">

另外,我想添加另一个建议:您使用的.keyCode是不推荐使用的建议.你仍然可以使用,但不鼓励它.浏览器开发人员有可能决定在将来放弃这一点.这会导致代码无效.问题是每个浏览器/操作系统都有自己的keyCodes,这使得它不太可靠.

如需干净的方法,请考虑使用 KeyboardEvent.code