JavaScript unload 事件

摘要: 在本教程中,您将学习如何使用 JavaScript unload 事件,该事件在文档完全卸载时触发。

请注意,除非有充分的理由,否则您不应该使用 unload 事件。

JavaScript unload 事件简介

unload 事件在文档完全卸载时触发。通常,unload 事件会在您从一个页面导航到另一个页面时触发。

unload 事件是在以下事件之后触发的

此时,HTML 文档处于以下状态

  • UI 对用户不可见,也不起作用。
  • 所有资源(如图像、iframe 等)仍然存在。
  • 错误不会阻止卸载流程。

在实践中,您不应该使用 unload 事件,因为它在移动设备上不可靠,并且会导致 bfcache 出现问题

处理 JavaScript unload 事件

要处理 unload 事件,您可以使用 addEventListener() 方法

addEventListener('unload', (event) => {
    console.log('The page is unloaded');
});Code language: JavaScript (javascript)

或者,您可以将事件处理程序分配给 window 对象的 onunload 属性

window.onunload = (event) => {
    console.log('The page is unloaded');
};Code language: JavaScript (javascript)

或者,您将事件处理程序分配给 <body> 元素的 onunload 属性

<!DOCTYPE html>
<html>
<head>
    <title>JS unload Event Demo</title>
</head>
<body onunload="console.log('The page is unloaded')">

</body>
</html>Code language: HTML, XML (xml)

建议使用 addEventListener() 来注册 unload 事件处理程序。

摘要

  • 当文档完全卸载时,JavaScript 会触发 unload 事件。
  • 在实践中,除非有充分的理由,否则不要使用 unload 事件。
本教程对您有帮助吗?