时间戳

首页 > 解决方案 > 事件处理程序去抖动后输入事件发生变化

javascript - 事件处理程序去抖动后输入事件发生变化

问题描述

我有一个简单的表单和一个字段来从该表单呈现该输入字段的值

   <div id="app">
      <form id="form">
        <label
          >some form
          <input type="text" name="myInput" />
        </label>
      </form>
      <p id="field"></p>
    </div>


function getFormValues(event) {
  const data = new FormData(event.currentTarget);
  const { myInput } = Object.fromEntries(data);
  console.log("value", myInput);

  field.textContent = myInput;
}

const form = document.getElementById("form");
const field = document.getElementById("field");

form.addEventListener("input", getFormValues); //

到目前为止它有效。然而，一旦我用我写的这个工具去抖动它（顺便说一句，我很清楚lodash那里的工具可以做同样的事情）

function debounce(fn, delay) {
  let timerId;

  return (...args) => {
    if (timerId) clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

const debouncedGetFormValues = debounce(getFormValues, 500);

form.addEventListener("input", debouncedGetFormValues); // Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

突然间我得到一个错误说Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

这是现场演示https://codesandbox.io/s/awesome-rosalind-1brqi?file=/src/index.js

不知道这里出了什么问题。

请不要仅仅因为setTimeout 之后事件 currentTarget 发生变化而投票结束这个问题。它不能解决我的问题。即使您更改 const data = new FormData(event.currentTarget);为const data = new FormData(event.target);. 问题仍然存在。

标签： javascripthtml

解决方案

问题来自input事件的行为。的实例InputEvent带有相应的输入元素 as target，即使您在表单元素上添加了侦听器。

因此，只需将您的代码重写为：

function getFormValues(event) {
  const form = event.target.form; // Get the form element
  const data = new FormData(form);
  const { myInput } = Object.fromEntries(data);
  console.log("value", myInput);

  field.textContent = myInput;
}

推荐阅读