DOM 元素可以同时处理 keyup 和 input 事件吗？

Question

在一个应用程序中，我有一个带有输入处理程序的文本输入元素。我想对退格键执行一个特殊操作，所以我添加了一个 keyup 处理程序来处理这种情况。除非字段为空，否则不会调用它 - 显然，当调用输入处理程序时，它会抑制 keyup 处理程序。

我可能可以使用 keyup 处理程序为所有内容重写代码，但这将涉及复制粘贴和其他键（删除、输入、制表等）的正确处理，我宁愿不这样做。

这是在 chrome 上进行的，但我也在 firefox 和 safari 上对其进行了测试，并且得到了相同的行为，所以这肯定是预料之中的，但我找不到它的文档。下面的代码演示了这个问题。按原样加载并输入文本时，仅调用输入处理程序。当该字段为空时，将调用 keyup 处理程序。如果删除了输入处理程序，那么当然会在每次按键时调用 keyup 处理程序。

<html>
  <head>
    <script>
      function setup() {
      document.getElementById("xxx").addEventListener("input", (ev) => alert("input"));
      document.getElementById("xxx").addEventListener("keyup", (ev) => alert("keyup"));
      }
      window.addEventListener("load", () => setup());
    </script>
  </head>
  <body>
    test handlers: <input type="text" id="xxx" />
  </body>
</html>

（示例编辑为使用 addEventListener 而不是 onevent）

我现在考虑的解决方法是使用 keydown 事件，它被调用，但我想了解为什么它有这种行为。

Answer 1

每次只有一个警报使另一个呼叫无效时，它们都会被调用，如果您将警报更改为日志，您会看到这一点

<html>
<head>
</head>
<body>
  test handlers: <input type="text" oninput="console.log('input')" onkeyup="alert('keyup')" />
</body>
</html>

或者如果您设置超时

<html>
<head>
</head>
<body>
  test handlers: <input type="text" oninput="setTimeout(()=>alert('input'),1000)" onkeyup="alert('keyup')" />
</body>
</html>

这是预料之中的，因为退格键正在更改输入，而按键是在释放按键时，而按键是在警报处于 window

时释放

DOM 元素可以同时处理 keyup 和 input 事件吗？

Can a DOM element handle both keyup and input event?

javascript

dom-events