原版JS中的forEach循环迭代不适用于keyup事件，但适用于点击事件

Question

我通过套接字发出。IO向用户发送poke消息，在下面的代码上，我只实现了(onclick部分(，它正常工作，但不知道keyup部分出了什么问题......另外，尝试了键控事件，但没有工作。我不想通过将函数声明作为 arg 传递给事件来做到这一点，而是像匿名函数一样，更好地了解幕后发生的事情。我将不胜感激任何帮助或提示。

["keyup", "click"].forEach(
(evt) =>
document
.getElementById(eachUser.buttonElement)
.addEventListener(evt, () => {
if ((evt === "keyup" && evt.keyCode === 13) || evt === "click") {
const pokeMessage = document.getElementById(eachUser.inputElement)
.value;
private_socket.emit("poke message", {
username: user.name,
sessionID: user.sessionID,
pokeMessage: pokeMessage,
});
pokeUser.parentNode.removeChild(pokeUser);
} else {
return;
}
}),
false
);

Answer 1

问题是您将来自forEach循环的evt变量与代码作为参数获取但未采用的 Event 对象混淆了。

在代码中，evt是为其添加了当前调用侦听器的事件的名称("keyup"或"click"(。

当您计算evt.keyCode时，它将返回undefined(两个事件名称字符串都没有keyCode属性(，并且您的代码停止工作。

您可能希望改为访问当前事件的keyCode属性，您可以在事件侦听器中将其作为参数进行访问：

["keyup", "click"].forEach(
(eventName) =>
// ^^^^^^^^^--- Renamed for clarity
document
.getElementById(eachUser.buttonElement)
.addEventListener(eventName, eventObj => {
// ^^^^^^^^--- take argument (and name it whatever you want)
if ((eventName === "keyup" && eventObj.keyCode === 13) || eventName === "click") {
const pokeMessage = document.getElementById(eachUser.inputElement)
.value;
private_socket.emit("poke message", {
username: user.name,
sessionID: user.sessionID,
pokeMessage: pokeMessage,
});
pokeUser.parentNode.removeChild(pokeUser);
} else {
return;
}
}),
false
);