HTMLFormElement: formdata 事件
formdata 事件在构建表示表单数据的条目列表后触发。这会在表单提交时发生，但也可以通过调用 FormData() 构造函数来触发。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("formdata", (event) => { })
onformdata = (event) => { }
事件类型
一个 FormDataEvent。继承自 Event。
事件属性
继承其父接口 Event 的属性。
FormDataEvent.formData-
包含事件触发时表单中数据的
FormData对象。
示例
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(formElem.querySelector('input[name="field1"]')); // FOO
console.log(formElem.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 gets modified by the formdata event
formData.set("field1", formData.get("field1").toLowerCase());
formData.set("field2", formData.get("field2").toLowerCase());
});
onformdata 版本看起来会像这样
js
formElem.onformdata = (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 # event-formdata |
浏览器兼容性
加载中…
另见
- HTML
<form>元素 FormDataEvent