FormDataEvent
FormDataEvent 接口代表一个 formdata 事件——当表单数据的条目列表构建完成后，会在一个 HTMLFormElement 对象上触发此类事件。这会在表单提交时发生，但也可以由 FormData() 构造函数的调用触发。
这使得在 formdata 事件触发时可以快速获取一个 FormData 对象，而无需在你希望通过 fetch() 等方法提交表单数据时自行组装（请参阅 使用 FormData 对象）。
构造函数
FormDataEvent()-
创建一个新的
FormDataEvent对象实例。
实例属性
继承自其父接口 Event 的属性。
FormDataEvent.formData-
包含事件触发时代表表单数据的
FormData对象。
实例方法
继承自其父接口 Event 的方法。
示例
js
// grab reference to form
const formElem = document.querySelector("form");
// submit handler
formElem.addEventListener("submit", (e) => {
// on form submission, prevent default
e.preventDefault();
console.log(form.querySelector('input[name="field1"]')); // FOO
console.log(form.querySelector('input[name="field2"]')); // BAR
// construct a FormData object, which fires the formdata event
const formData = new FormData(formElem);
// formdata gets modified by the formdata event
console.log(formData.get("field1")); // foo
console.log(formData.get("field2")); // bar
});
// formdata handler to retrieve data
formElem.addEventListener("formdata", (e) => {
console.log("formdata fired");
// modifies the form data
const formData = e.formData;
formData.set("field1", formData.get("field1").toLowerCase());
formData.set("field2", formData.get("field2").toLowerCase());
});
规范
| 规范 |
|---|
| HTML # the-formdataevent-interface |
浏览器兼容性
加载中…