在前端开发中，有时需要提示用户在离开当前页面之前保存数据或执行其他操作。这时就可以使用 beforeunload 事件来实现。
beforeunload 事件
beforeunload 事件在窗口、文档或其子资源即将被卸载时触发，例如关闭页面、刷新页面、跳转到其他页面等。该事件可以用于在用户离开页面之前进行一些操作，例如弹出确认框提示用户保存数据。
---------------------------- -------- -- -
------ --------------
---上述代码会在用户关闭页面或离开页面时弹出确认框，提示用户是否确定离开页面。
使用场景
保存未提交的表单数据
当用户填写了表单但还没有提交时，如果用户意外离开页面，那么填写的数据将会丢失。为了避免这种情况，我们可以在用户离开页面时弹出确认框提示用户是否保存数据。
---------------------- -------- -- -
--------------------- - -------- -- -
------ ----------------------
--
---
---------------------- -------- -- -
--------------------- - -----
---上述代码会在用户修改了表单内容但未提交时，设置 beforeunload 事件的回调函数，在用户离开页面时弹出确认框。当用户提交表单时，取消 beforeunload 事件的回调函数。
防止误操作跳转
当用户在填写表单或编辑文本时，不小心按下了浏览器的后退按钮或其他的跳转链接，这样用户之前的工作就全都白费了。为了避免这种情况，我们可以在用户离开当前页面时弹出确认框提示用户是否真的要离开。
--- ---------- - ------
----------------------- ---------- ------- -------- -- -
---------- - -----
---
---------------------------- -------- -- -
-- ------------ -
------ --------------
-
---上述代码会在用户修改了页面内容后，设置一个变量 hasChanged 标记页面是否有变化。在用户离开页面时，如果页面有变化，就弹出确认框提示用户是否真的要离开。
总结
beforeunload 事件可以用于在用户离开页面之前进行一些操作，例如弹出确认框提示用户保存数据。在使用该事件时需要注意，弹出确认框会影响用户体验，应该尽量减少使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13289