1. 收集表单数据： 将表单中所有带有name属性的输入字段的值收集起来。
2. 构建请求： 根据表单的method（GET或POST）和action属性，构建一个HTTP请求。
3. 发送请求并重载页面： 向服务器发送这个HTTP请求，并在请求完成后，浏览器会根据服务器的响应重新加载整个页面。

在上述JavaScript代码中，虽然document.querySelector('h1').innerHTML = word;成功地更新了

标签的内容，但紧接着，表单的默认提交行为触发了页面重载。页面重载后，所有的JavaScript执行状态和DOM的动态修改都会被清除，页面恢复到初始加载时的状态，因此之前通过innerHTML设置的内容也就“消失”了。

解决方案：阻止默认事件 event.preventDefault()

要解决这个问题，我们需要阻止表单的默认提交行为。JavaScript提供了一个标准的方法来实现这一点：event.preventDefault()。

立即学习“Java免费学习笔记（深入）”；

Uni-CourseHelper

私人AI助教，高效学习工具

94

查看详情

当事件处理函数被调用时，它会接收一个Event对象作为参数。这个Event对象包含了关于事件的各种信息，其中preventDefault()方法的作用就是阻止事件的默认行为。对于表单的submit事件，调用event.preventDefault()将阻止页面重载。

下面是修改后的JavaScript代码示例：

document.addEventListener('DOMContentLoaded', function() {
    // 为表单的onsubmit事件添加事件监听器
    document.querySelector('form').onsubmit = function(event) {
        // 阻止表单的默认提交行为，即阻止页面重载
        event.preventDefault();

        // 获取用户输入的值
        const word = document.querySelector('#wrd').value;

        // 获取要更新的h1元素
        const header = document.querySelector('h1');

        // 更新h1标签的内容
        header.innerHTML = word;

        // 可选：清空输入框，提升用户体验
        document.querySelector('#wrd').value = '';
    }
});

代码解释：

1. document.querySelector('form').onsubmit = function(event) { ... }：我们为表单的submit事件绑定了一个处理函数。注意，这里我们将event对象作为参数传入。
2. event.preventDefault();：这是关键一步。它确保了在执行我们自定义的逻辑（更新

   内容）之后，浏览器不会执行默认的表单提交和页面重载操作。

3. const word = document.querySelector('#wrd').value; 和 header.innerHTML = word;：这些代码保持不变，它们负责获取输入并更新DOM。
4. document.querySelector('#wrd').value = '';：这是一个可选但推荐的做法。在成功处理输入后清空输入框，可以给用户一个清晰的反馈，表示操作已完成，并且可以准备下一次输入。

注意事项与最佳实践

• 何时使用 preventDefault()：
  • 当你希望通过JavaScript完全控制表单提交过程，例如使用AJAX异步发送数据到服务器，而不希望页面重载时。
  • 当你只是想在客户端进行数据展示或验证，而不涉及服务器交互时。
  • 当你需要阻止其他元素的默认行为，例如阻止标签的默认跳转行为。
• 何时不使用 preventDefault()：
  • 当你确实需要表单将数据提交到服务器，并且希望页面在提交后进行重定向或显示新的页面时。在这种情况下，你可以在表单提交前执行一些JavaScript验证，但最终允许默认提交发生。
• 异步提交 (AJAX)： 在更复杂的应用中，通常会结合event.preventDefault()和AJAX（Asynchronous JavaScript and XML）技术来提交表单数据。这样可以在不重载页面的情况下与服务器进行通信，提供更流畅的用户体验。
• 用户体验： 除了清空输入框，你还可以考虑在成功更新内容后，给用户一些视觉反馈，例如短暂显示一个“成功”消息，或者改变相关元素的样式。
• 事件委托： 如果你的页面中有多个表单，或者表单是动态添加到DOM中的，可以考虑使用事件委托来监听submit事件，而不是直接给每个表单绑定事件。

总结

innerHTML内容在表单提交后“闪烁”消失的问题，是由于HTML表单的默认提交行为导致页面重载所致。通过在表单的submit事件处理函数中调用event.preventDefault()方法，我们可以有效地阻止这一默认行为，从而确保JavaScript对DOM的动态更新能够持久显示。理解并正确使用event.preventDefault()是前端开发中处理事件和交互逻辑的关键技能之一。