FormDataEvent
FormDataEvent 接口表示 formdata 事件——此事件在表示表单数据的条目列表构造之后，在 HTMLFormElement 对象上触发。提交表单时会发生这种情况，但也可以通过调用 FormData() 构造函数来触发。
这允许 FormData 对象被快速获取以响应 formdata 事件的触发，而不需要在你希望通过 fetch()（参见 使用 FormData 对象）等方法提交表单数据时自己将其组合在一起。
构造函数
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());
});
规范
| 规范 |
|---|
| HTML # the-formdataevent-interface |