html如何通过监听事件调用函数提交表单数据，详细代码示例

可以通过监听表单的submit事件来调用函数提交表单数据。以下是一个详细的代码示例：

HTML代码：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

JavaScript代码：

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  const formData = new FormData(form); // 创建一个formData对象
  const xhr = new XMLHttpRequest(); // 创建一个XMLHttpRequest对象
  xhr.open('POST', '/submit-form-data'); // 设置请求的URL和方法
  xhr.send(formData); // 发送formData对象
});

上面的代码中，我们首先通过 `document.getElementById` 获取表单元素，然后通过 `addEventListener` 监听表单的 `submit` 事件。在事件处理函数中，我们使用 `FormData` 对象来获取表单数据，然后创建一个 `XMLHttpRequest` 对象并发送表单数据到服务器。

注意，我们使用 `event.preventDefault()` 阻止了表单的默认提交行为，以便我们可以手动处理表单数据并发送到服务器。