【JavaScript】阻止表单的默认提交行为

表单的默认提交行为是指在用户提交表单时，浏览器会自动将表单数据发送到服务器，并根据表单中的 action 属性和 method 属性来执行相应的操作。默认情况下，表单提交后会导致浏览器刷新页面或导航到 action 属性指定的页面，并且页面会显示服务器响应的内容。

阻止表单的默认提交行为意味着在提交表单时，不让浏览器执行默认的提交操作，而是通过 JavaScript 来处理表单提交，并执行自定义的操作，例如异步提交、表单验证、页面更新等。

在 JavaScript 中，可以使用事件对象（如上面代码中的 e）的 preventDefault() 方法来阻止默认提交行为。该方法可以在事件处理函数中调用，当事件触发时，调用 e.preventDefault() 可以阻止浏览器默认的行为。在上述代码中，事件处理函数的目的是调用 addTodo() 函数来添加新的 todo 项，而不是直接提交表单并刷新页面。

阻止表单的默认提交行为通常用于以下场景：

1. 异步表单提交：当希望通过 JavaScript 处理表单提交，并在后台发送异步请求处理表单数据时，可以阻止默认提交行为，以便通过 AJAX 或 Fetch API 将表单数据发送到服务器。

2. 表单验证：在提交表单之前，可以对表单数据进行验证，以确保用户输入的内容是有效的。如果数据不符合要求，可以阻止默认提交行为，并显示错误消息或提示用户进行修正。

3. 前端交互：阻止默认提交行为允许我们在表单提交时实现更丰富的前端交互，而不必刷新整个页面。可以通过 JavaScript 更新页面的部分内容，或在提交后显示成功或失败的消息，而不中断用户的浏览体验。

总之，阻止表单的默认提交行为可以让我们更好地控制表单的交互和数据处理，为用户提供更流畅和友好的用户体验。