一个 JS 文件中的多个 keyup 事件

Question

我的 HTML 网页有一个 JS 文件。我想检查 4 件事。如果他们在键盘上点击一个数字 1-4，它会将他们带到指定的 url。该脚本有效，但前提是我有一个。

当我将所有 4 个事件都放在 js 文件中时，只有最后一个/最近的一个有效。是否有某种我做错的语法导致它们全部停止工作？

为了进一步解释，使用这段代码，只有这部分脚本运行：

//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 文件中的另一个 sn-p ？那是没有生产力的。

为防止这种情况，您可以使用选项 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。您仍然可以使用，但不鼓励使用。浏览器开发人员有可能决定在未来放弃它。这会导致代码不起作用。 问题是每个浏览器/操作系统都有自己的密钥代码，这使得它不太可靠。

对于干净的方法，请考虑使用KeyboardEvent.code

Answer 3

您好，欢迎来到 StackOverflow ;)

您每次都在注册一个新的 onkeyup 事件监听器。尝试将 if 语句全部放入一个侦听器中，如下所示：

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

我希望这会有所帮助。

Answer 4

大多数人的回答都可以，但是为了避免代码重复和长篇大论的“IF”语句，我只会使用 switch 语句：

document.body.onkeyup = function(e){
    switch(e.keyCode) {
        case 49:
            window.location.href = "http://localhost:1337/trail";
            break;
        case 50:
            window.location.href = "foo";
            break;
        case 51:
            window.location.href = "http://localhost:1337/topten";
            break;
        case 52:
            window.location.href = "foo";
            break;
    }
}

Answer 5

您正在覆盖事件处理程序，您需要在那里拥有一个函数。试试这个选项：

//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 6

是的，有一种替代语法允许将多个事件处理程序添加到同一个对象而不会相互覆盖。

addEventListener('keyup', functionHere );

/*
// This will work without overriding other functions...
//If they hit keypad number 1
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
});
//If they hit keypad number 2
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
});
//If they hit keypad number 3
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
});
//If they hit keypad number 4
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
});
*/

// It may be best to combine them all even when using this method...
document.body.addEventListener("keyup", function(e) {
  //If they hit keypad number 1
  if (e.keyCode == 49) {
    window.location.href = "http://localhost:1337/trail";
  }
  //If they hit keypad number 2
  if (e.keyCode == 50) {
    window.location.href = "foo";
  }
  //If they hit keypad number 3
  if (e.keyCode == 51) {
    window.location.href = "http://localhost:1337/topten";
  }
  //If they hit keypad number 4
  if (e.keyCode == 52) {
    window.location.href = "foo";
  }
});

Answer 7

也许将您所有的ifs 添加到一个事件侦听器中：

document.body.addEventLister("keydown", function(e) {
    if (e.key == "Digit1") {
        window.location.href = "http://localhost:1337/trail";
    }
    if (e.key == "Digit2") {
        window.location.href = "foo";
    }
     if (e.key == "Digit3") {
        window.location.href = "http://localhost:1337/topten";
    }
    if (e.keyCode == "Digit4") {
        window.location.href = "foo";
    }
}