SubmitEvent

Baseline 已广泛支持

此功能已成熟,并可在多种设备和浏览器版本上运行。自 2021 年 9 月起,所有浏览器均已支持此功能。

SubmitEvent 接口定义了用于表示 HTML 表单的 submit 事件的对象。当表单的提交操作被调用时,此事件会在 <form> 元素上触发。

Event SubmitEvent

构造函数

SubmitEvent()

创建并返回一个新的 SubmitEvent 对象,其 type 和其他选项会按照指定进行配置。请注意,目前 SubmitEvent 唯一有效的 typesubmit

实例属性

除了下面列出的属性外,此接口还继承了其父接口 Event 的属性。

submitter 只读

一个 HTMLElement 对象,用于标识触发表单提交的按钮或其他元素。

实例方法

虽然 SubmitEvent 本身不提供任何方法,但它会继承其父接口 Event 提供的任何方法。

示例

在此示例中,一个购物车的提交按钮可能会根据用户设置、商店设置以及支付处理商设置的最低或最高购物车总金额等因素而有所不同。每个提交元素的 id 用于识别该按钮对应的支付处理商。

js
let form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  let submitter = event.submitter;
  let handler = submitter.id;

  if (handler) {
    processOrder(form, handler);
  } else {
    showAlertMessage(
      "An unknown or unaccepted payment type was selected. Please try again.",
      "OK",
    );
  }
});

通过使用 submit 事件的 submitter 属性来获取提交按钮,然后从中获取 ID,从而获得处理程序 ID。有了这个 ID,我们就可以调用一个 processOrder() 函数来处理订单,并将表单和处理程序 ID 传递过去。

规范

规范
HTML
# the-submitevent-interface

浏览器兼容性