vanillaJS中的forEach循环迭代不适用于keyup事件，但适用于click事件答案

【问题标题】：Iterate by forEach loop in vanillaJS do not work for keyup event, but works fine for click eventvanillaJS中的forEach循环迭代不适用于keyup事件，但适用于click事件
【发布时间】：2020-05-28 14:04:27
【问题描述】：

我通过 socket.IO 向用户发送 poke-message 并且在下面的代码中我只实现了（onclick 部分），它按应有的方式工作，但不知道 keyup 部分出了什么问题......此外，尝试了 keydown 事件，但没有奏效。我不想通过将函数声明作为 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
);

【问题讨论】：

evt 是一个字符串。因此，evt.keyCode 不是一个东西。
.addEventListener(evt, () => { 应该是.addEventListener(evt, event => {，然后使用真正的event 进行逻辑
@Taplar 抱歉，这不是已经将 evt 视为事件吗？你是什么意思真正的“事件”我有点困惑
所以看看你的evt 来自哪里。它源自forEach()，作为传递给该回调的值。然后将它用作addEventListener 方法的第一个参数，该方法的第一个参数应该是一个字符串，说明要绑定到哪些事件。
@Taplar 感谢反馈“该方法的第一个参数应该是一个字符串，说明要绑定到哪些事件。”是的......它是bindend'click'作为一个字符串，'keyup'不能是一个字符串，但它像它一样传递？所以我需要将 keyup 作为硬编码的对象传递给我的列表？

标签： javascript ecmascript-6 foreach

【解决方案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
);

【讨论】：