表单默认提交行为会触发页面刷新，导致动态显示的内容一闪而逝；正确使用 event.preventDefault() 并传入事件对象是解决该问题的核心方法，同时推荐采用现代事件绑定方式提升代码健壮性。
表单默认提交行为会触发页面刷新，导致动态显示的内容一闪而逝；正确使用 `event.preventdefault()` 并传入事件对象是解决该问题的核心方法，同时推荐采用现代事件绑定方式提升代码健壮性。
在 HTML 中，<input type="submit"> 或 <button type="submit"></button> 置于 <form></form> 内时，点击会触发表单的默认提交行为：浏览器向当前 URL 发送 GET 请求（无 action 属性时），并完全重载页面。这正是你看到输入值“闪现即逝”的根本原因——内容刚写入 DOM，页面就刷新回初始状态。
你已发现 event.preventDefault() 可阻止刷新，这是标准且推荐的解决方案。但关键在于：必须显式接收并调用事件对象，而非依赖已废弃的全局 window.event。以下为三种专业、可维护的实现方式：
✅ 方式一：内联事件中传入 event（基础修正）
<form> <label for="name">Name:</label> <input id="name" type="text"> <!-- 注意：onclick="myFunc(event)" 显式传递事件 --> <input type="submit" value="Send" onclick="myFunc(event)"> </form> <p id="show_name"></p>
function myFunc(event) {
event.preventDefault(); // 阻止默认提交行为
const name = document.getElementById("name").value;
document.getElementById("show_name").textContent = name; // 推荐用 textContent 替代 innerHTML（更安全）
}✅ 方式二：使用 addEventListener（推荐 ✅）
彻底解耦 HTML 与 JavaScript，避免内联脚本，提高可维护性：
<form id="nameForm"> <label for="name">Name:</label> <input id="name" type="text"> <input type="submit" value="Send"> </form> <p id="show_name"></p>
document.getElementById('nameForm').addEventListener('submit', function (event) {
event.preventDefault();
const name = document.getElementById('name').value;
document.getElementById('show_name').textContent = name;
// 可选：清空输入框或聚焦等后续操作
document.getElementById('name').value = '';
});⚠️ 注意事项与最佳实践
-
不要依赖
window.event：它已被现代规范弃用，部分浏览器可能在未来版本中移除支持； -
优先使用
textContent而非innerHTML：除非需渲染 HTML，否则textContent更安全（防止 XSS）、性能更好； -
确保 DOM 加载完成再执行脚本：将 JS 放在
