TypeScript 提交事件

TypeScript 是一种由 Microsoft 开发的开源编程语言，它是 JavaScript 的超集，具有类型检查和其他功能。使用 TypeScript 可以让 JavaScript 代码更加健壮且易于维护。本文将介绍如何在 TypeScript 中处理提交事件。

HTML 表单

首先，我们需要了解 HTML 表单。HTML 表单由表单元素和表单控件组成。表单元素是用于将数据提交到服务器的部分。表单控件包括输入框、按钮、单选框等等。

例如：

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <br />
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <br />
  <button type="submit">Submit</button>
</form>

在上面的代码中，我们创建了一个表单元素，其中包含两个表单控件：输入框和按钮。按钮具有 type="submit" 属性，表示单击按钮后将提交表单数据。

TypeScript 处理提交事件

当用户单击表单中的提交按钮时，会触发提交事件。我们可以使用 TypeScript 来处理提交事件。

首先，我们需要使用 addEventListener 方法将事件监听器添加到表单元素上。该方法接受两个参数：事件类型和事件处理函数。在本例中，事件类型为 submit，事件处理函数为 handleSubmit。

const form = document.querySelector('form')

form?.addEventListener('submit', handleSubmit)

function handleSubmit(event: Event) {
  event.preventDefault()

  console.log('Form submitted!')
}

在上面的代码中，我们定义了 handleSubmit 函数来处理提交事件。 event.preventDefault() 方法停止了默认的表单提交行为，以便我们可以自己处理表单数据。在本例中，我们只是输出了一条消息到控制台。

接下来，我们需要获取表单数据。我们可以使用 FormData 对象来收集表单数据。该对象通过 append 方法添加表单控件的值。然后，我们可以使用 fetch 方法将表单数据发送到服务器。

const form = document.querySelector('form')

form?.addEventListener('submit', handleSubmit)

async function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)

  const response = await fetch('/submit-form', {
    method: 'POST',
    body: formData,
  })

  console.log(response.statusText)
}

在上面的代码中，我们使用了 fetch 方法将表单数据提交到服务器。在这个例子中，我们将表单数据提交到了 /submit-form 路径。请求方法为 POST，请求体为表单数据。

现在，我们已经成功处理了提交事件并将表单数据发送到服务器。

总结

本文介绍了如何在 TypeScript 中处理提交事件。我们学习了如何使用 addEventListener 方法添加事件监听器、如何使用 FormData 对象获取表单数据、以及如何使用 fetch 方法将表单数据发送到服务器。希望这篇文章能对您有所帮助！