表单默认提交行为会触发页面刷新，需通过 event.preventDefault() 阻止；关键在于正确传递事件对象，而非依赖已废弃的全局 window.event。本文详解原理、推荐写法及替代方案。
表单默认提交行为会触发页面刷新，需通过 event.preventdefault() 阻止；关键在于正确传递事件对象，而非依赖已废弃的全局 window.event。本文详解原理、推荐写法及替代方案。
页面在点击“Send”按钮后立即刷新，根本原因在于 <input type="submit"> 位于 <form></form> 内部——浏览器会将其视为表单提交控件，触发默认的 submit 行为：收集表单数据、向当前 URL（无 action 时即自身）发起 GET 请求，导致整个页面重载。这与 JavaScript 函数执行无关，而是 HTML 表单的原生语义行为。
✅ 正确做法：显式传入事件对象并调用 preventDefault()
最规范、兼容性好且符合现代 Web 标准的方式，是在内联事件处理器中显式传入 event 参数，并在 JS 函数中调用 event.preventDefault()：
function myFunc(event) {
event.preventDefault(); // ✅ 阻止默认提交行为
const nameValue = document.getElementById("name").value;
document.getElementById("show_name").textContent = nameValue; // 推荐用 textContent 替代 innerHTML（更安全）
}
⚠️ 注意：不要使用
window.event（如event.preventDefault()未传参时尝试访问），它已被 MDN 明确标记为非标准、已弃用，在严格模式或未来浏览器中可能失效。
? 更优实践：解耦 HTML 与 JS（推荐）
内联 onclick 不利于维护和测试。建议采用事件监听器方式，实现关注点分离：
document.getElementById("nameForm").addEventListener("submit", function (event) {
event.preventDefault(); // 阻止表单提交
const nameValue = document.getElementById("name").value;
document.getElementById("show_name").textContent = nameValue;
});
此写法更清晰、可复用性强，且天然支持 event 对象，无需手动传参。
? 其他可行但不推荐的替代方案
将按钮类型改为
button：<input type="button" value="Send" onclick="myFunc()">可避免提交行为，但牺牲了语义化（不再是表单提交控件），且无法通过回车键触发表单逻辑。设置表单
onsubmit="return false"：<form onsubmit="return false"></form>虽能阻止刷新，但属于硬编码、不可扩展，且无法在 JS 中动态控制逻辑。
✅ 总结
| 方案 | 是否推荐 | 原因 |
|---|---|---|
onclick="myFunc(event)" + event.preventDefault()
|
✅ 推荐（快速修复） | 明确、兼容、符合标准 |
addEventListener("submit", ...) |
✅✅ 最佳实践 | 解耦、可维护、语义清晰 |
依赖 window.event
|
❌ 禁用 | 已弃用，存在兼容风险 |
改用 type="button"
|
⚠️ 次选 | 牺牲表单语义与键盘交互（Enter 提交） |
始终牢记：表单刷新是浏览器默认行为，不是代码 Bug；阻止它需主动干预，而 preventDefault() 是标准、可靠、唯一的正确入口。
