FormDataEvent - 表示一个 formdata 事件

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

它允许在触发 formdata 事件时快速获取 FormData 对象，而无需通过 XMLHttpRequest 之类的方法提交表单数据时自己将其组合在一起（请参阅使用 FormData 对象）。

构造函数

FormDataEvent()

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

属性

从其父接口 Event 继承了属性。

FormDataEvent.formData

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

方法

从其父接口 Event 继承了方法。

实例

// 获取表单对象
const formElem = document.querySelector('form');

// 提交处理程序
formElem.addEventListener('submit', (e) => {
  // 提交表单时，阻止默认操作
  e.preventDefault();

  // 构造一个 FormData 对象，该对象将触发 formdata 事件
  new FormData(formElem);
});

// formdata 处理程序以检索数据
formElem.addEventListener('formdata', (e) => {
  console.log('触发了 formdata');

  // 从事件对象获取表单数据
  let data = e.formData;
  for (var value of data.values()) {
    console.log(value);
  }

  // 通过 XHR 提交数据
  var request = new XMLHttpRequest();
  request.open("POST", "/formHandler");
  request.send(data);
});

规范

规范	状态	备注
HTML Living Standard FormDataEvent 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• XMLHTTPRequest
• FormData
• 使用 FormData 对象
• <form>