FormDataEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

FormDataEvent 接口表示 formdata 事件——此事件在表示表单数据的条目列表构造之后，在 HTMLFormElement 对象上触发。提交表单时会发生这种情况，但也可以通过调用 FormData() 构造函数来触发。

这允许 FormData 对象被快速获取以响应 formdata 事件的触发，而不需要在你希望通过 fetch()（参见 使用 FormData 对象）等方法提交表单数据时自己将其组合在一起。

Event FormDataEvent

构造函数

FormDataEvent()

创建一个新的 FormDataEvent 对象实例。

实例属性

从其父接口 Event 继承属性。

FormDataEvent.formData

包含 FormData 对象，该对象表示在事件触发时，表单中包含的数据。

实例方法

从其父接口 Event 继承方法。

示例

js
// 获取对表单的引用
const formElem = document.querySelector("form");

// submit 处理器

formElem.addEventListener("submit", (e) => {
  // 在表单提交时，阻止默认行为
  e.preventDefault();

  console.log(form.querySelector('input[name="field1"]')); // FOO
  console.log(form.querySelector('input[name="field2"]')); // BAR

  // 构造 FormData 对象，用于触发 formdata 事件
  const formData = new FormData(formElem);
  // 通过 formdata 事件修改 formdata 数据
  console.log(formData.get("field1")); // foo
  console.log(formData.get("field2")); // bar
});

// 用于获取数据的 formdata 处理器

formElem.addEventListener("formdata", (e) => {
  console.log("formdata 触发");

  // 修改表单数据
  const formData = e.formData;
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});

规范

Specification
HTML Standard
# the-formdataevent-interface

浏览器兼容性

BCD tables only load in the browser

参见