DOM元素能否同时绑定并触发keyup和input两个事件？

你观察到的事件阻断现象并非input事件本身的特性，核心问题来自测试代码中使用的alert() API的同步阻塞特性：

• 常规文本输入场景下的事件触发顺序为：keydown → 输入框值更新 → input 事件触发 → keyup 事件触发
• alert() 是同步模态API，触发后会直接挂起JS线程的所有执行逻辑，同时夺走输入框的焦点
• 当输入框非空时按下退格键，输入框值发生变化触发input事件，弹出的alert会阻塞后续事件队列，此时你松开退格键的动作发生在阻塞周期内，浏览器无法正常派发keyup事件，等你关闭alert时按键释放动作已经结束，自然不会触发keyup回调
• 当输入框为空时按下退格键，输入框值没有变化，不会触发input事件，也就没有alert阻塞线程，keyup事件可以正常触发

将测试代码中的alert替换为console.log，打开浏览器开发者工具的控制台查看输出，即可观察到input和keyup事件均可正常触发，不存在阻断问题：

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

你不需要放弃input事件的通用处理逻辑，可根据实际业务场景选择以下方案：

• 业务逻辑中避免使用alert这类阻塞型模态API，改用非阻塞的自定义提示组件，input和keyup事件可以正常并行工作：input处理通用的输入值更新逻辑，keyup中判断event.key === 'Backspace'处理退格键的特殊逻辑即可
• 如果你确实需要兼容部分特殊场景，可继续使用keydown事件监听退格键，keydown触发时机早于input事件，不会被后续的逻辑阻塞

内容的提问来源于stack exchange，提问作者russell