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.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

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
# the-formdataevent-interface

浏览器兼容性

Report problems with this compatibility data on GitHub
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
FormDataEvent
FormDataEvent() constructor
formData

Tip: you can click/tap on a cell for more information.

Full support

参见