“提交”事件生成的 SubmitEvents 是否包含表单值？

Question

我有一个带有多个输入和一个提交按钮的 HTML 表单。我在表单上创建了一个事件监听器来监听“提交”事件。这会将 SubmitEvent 传递到回调函数中。

我想知道，是否有一个 getter 或快速对象属性可以接受输入名称（又名 input[name="XYZ"] 并返回提交时输入的值？

Answer 1

不。

target事件的属性将引用该元素form。您可以从中访问表单控件（通过querySelector或elements任何其他 DOM 方法）。

这将为您提供当前时间的值，而不是事件触发时的值。

如果您想要这样做，则需要在值更改之前复制它们。

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault();
  const data = new FormData(e.target);
  console.log([...data.entries()]);
});

<form>
  <input name="one" value="1">
  <input name="two" value="2">
  <button>Submit</button>
</form>