在前端开发中，有时需要在用户离开页面之前执行一些操作。例如，保存用户输入的表单数据、清理资源等等。本文将介绍如何截取页面退出事件并执行相关操作。
window.onbeforeunload 事件
window.onbeforeunload 是一个特殊的事件，它会在页面即将卸载（unload）之前触发。可以使用这个事件来执行一些清理工作或提示用户保存未保存的数据。当浏览器检测到该事件被监听，会弹出一个确认对话框，询问用户是否要离开页面。
以下是其基本语法：
window.addEventListener('beforeunload', function (event) {
// do something here...
event.preventDefault();
return '';
});其中，event 参数是一个 Event 对象，可用于取消默认行为和阻止冒泡。在这里，我们调用 preventDefault() 方法来阻止弹出默认的确认对话框，然后返回一个空字符串以满足浏览器的要求。
示例代码
以下是一个简单的例子，演示如何在页面关闭之前弹出一个确认对话框：
-- -------------------- ---- ------- --------------------------------------- -------- ------- - ----------------------- ----------------- - --- ------ --- --- -- -- --------------------- - --------------- - ----------------------- ----------------- - --- ------ --- -
可以看到，在上面的示例中，我们通过两种不同的方式注册了一个 beforeunload 事件监听器。在这里，我们阻止默认弹出对话框，并返回一个空字符串。
注意事项
window.onbeforeunload事件的使用有一些限制，例如无法在其中执行异步操作、不能修改文档或执行任何耗时的操作等。因此，在使用该事件时需要谨慎。- 大多数浏览器都支持
window.onbeforeunload事件，但是不同浏览器的实现可能会有所不同。在编写代码时应该进行充分测试。
总结
本文介绍了如何截取页面退出事件并执行相关操作。通过使用 window.onbeforeunload 事件，可以在用户离开页面之前执行清理工作或提示用户保存未保存的数据。然而，需要注意该事件的使用限制和浏览器实现的差异。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10686
