beforeunload 事件可用于提示用户保存未提交表单，但仅能触发浏览器内置确认框，且须在表单“变脏”时才启用：监听输入事件比对初始值设 isFormDirty 标志，为 true 时 beforeunload 回调返回非空字符串，提交后及时清理监听器。
在 JavaScript 中，beforeunload 事件可用于在用户即将离开页面（关闭标签页、刷新、导航跳转等）时触发提示，提醒用户保存未提交的表单。但需注意：现代浏览器出于用户体验和防骚扰考虑，已限制该事件的自定义弹窗行为——你无法显示任意内容的弹窗，只能触发浏览器内置的简短确认对话框，且仅当页面存在“脏数据”（即用户修改过但未保存）时才应启用。
监听 beforeunload 并标记“表单已修改”
核心逻辑是：只有当表单字段被用户实际修改过，才注册 beforeunload 监听器；否则不干扰正常浏览。推荐在页面加载后记录初始状态，再通过监听输入事件判断是否“变脏”：
- 用
form.elements或querySelectorAll('input, textarea, select')获取所有可编辑字段 - 遍历并保存初始值（如
field.defaultValue对 input/textarea 有效，select.value初始值需提前缓存） - 为每个字段绑定
input或change事件，一旦任一字段值变化，设全局标志isFormDirty = true
正确触发 beforeunload 提示
当 isFormDirty 为 true 时，在 beforeunload 回调中返回一个非空字符串（如 "您有未保存的更改，确定要离开吗？"），浏览器会自动显示标准提示框（内容由浏览器决定，你的字符串可能被忽略或仅作参考）：
- 必须使用
window.addEventListener('beforeunload', handler)，不要用window.onbeforeunload = handler（后者已被部分浏览器弃用） - 返回字符串是关键：返回
null、undefined或空字符串，浏览器不会弹提示 - 不要在回调里调用
alert、confirm等同步弹窗——会被浏览器阻止且报错
用户确认保存后及时清理监听
一旦用户点击“保存”按钮并成功提交，应立即将 isFormDirty 设为 false，并移除 beforeunload 监听器（或返回空字符串），避免误提示：
立即学习“Java免费学习笔记（深入）”；
- 提交成功后执行
window.removeEventListener('beforeunload', handler) - 也可保留监听器，但在回调开头加判断：
if (!isFormDirty) return; - 注意：页面卸载后监听器自动失效，无需手动清理，但主动清理更清晰
兼容性与注意事项
该机制在 Chrome、Firefox、Edge 中表现一致，但 Safari 对单页应用（SPA）路由跳转的支持较弱；另外，移动端浏览器通常完全禁用 beforeunload 提示（防止误触）：
- 不能依赖它阻止数据丢失，务必配合自动保存（如 localStorage 草稿）、实时校验等兜底方案
- 不要用于营销诱导（如“留下领红包”），违反浏览器策略会被静默屏蔽
- 若使用框架（React/Vue），需确保监听器在组件卸载时清除，避免内存泄漏
