javascript - onChange/onInput 替代方案？

Question

我正在创建一个打字测试页面并遇到了一个小问题。

我试图在用户键入时启动计时器，并且使用 onInput 有效，但问题是每次我键入 textArea 时它都会注册，这会导致 starttimer 函数自身重复。

onChange 有效，但它只有在我点击页面外部后才有效，这很有意义，但不是我要找的。我需要在用户开始输入时立即启动计时器。同样使用 onChange 停止功能有效，但计时器在我点击页面外部后启动。

是否有适合我正在寻找的 JS 事件，或者是否有更改 onInput 或 onChange 以解决我遇到的问题的方法。

JavaScript

document.getElementById("test-area").onchange = function () {
      startTimer(1);
};

谢谢。

Answer 1

您需要监听 input 事件，因为正如您所说，change 仅在输入失去焦点后触发，这不是您想要的。您还只需处理一次事件。

document.getElementById("test-area").addEventListener("input", () => {
  startTimer(1);
}, {once: true});

请注意，这会在触发后删除事件处理程序。如果您需要再次运行它，您将不得不再次注册该事件。也许在您的计时器回调中。