{"id":13799,"date":"2024-03-15T07:54:05","date_gmt":"2024-03-15T07:54:05","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/"},"modified":"2025-08-05T23:39:43","modified_gmt":"2025-08-05T23:39:43","slug":"explanation-of-onunload-and-onbeforeunload-events","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/","title":{"rendered":"onbeforeunload vs onunload Events Guide"},"content":{"rendered":"<p>The onunload event is triggered when the browser window is closed or refreshed. It can be used to perform cleanup operations, such as closing database connections or saving user data. When this event is triggered, the page&#8217;s resources and documents will be destroyed.<\/p>\n<p>The onbeforeunload event is triggered in the browser window before it is closed or refreshed. It can be used to provide a confirmation dialog to ask the user if they want to leave the current page. If the user chooses to leave the page, it will be either closed or refreshed.<\/p>\n<p>In the onbeforeunload event, you can customize the prompt message of the confirmation box by returning a string. If no value is returned, the confirmation box will display the default prompt message.<\/p>\n<p>&#8220;For example,&#8221;<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">onbeforeunload<\/span> = <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">\"\u786e\u8ba4\u79bb\u5f00\u5f53\u524d\u9875\u9762\u5417\uff1f\"<\/span>;\r\n}\r\n<\/code><\/pre>\n<p>If the user chooses to leave the page, it will be closed or refreshed. If the user chooses to stay on the page, the returned string will be ignored.<\/p>\n<p>It is important to note that the handling function of the onbeforeunload event usually needs to bind an event listener inside the function to prevent the browser from ignoring the returned string when closing or refreshing the page. For example:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-title function_\">addEventListener<\/span>(<span class=\"hljs-string\">\"beforeunload\"<\/span>, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">event<\/span>) {\r\n    event.<span class=\"hljs-title function_\">preventDefault<\/span>();\r\n    event.<span class=\"hljs-property\">returnValue<\/span> = <span class=\"hljs-string\">\"\u786e\u8ba4\u79bb\u5f00\u5f53\u524d\u9875\u9762\u5417\uff1f\"<\/span>;\r\n});\r\n<\/code><\/pre>\n<p>In this example, the preventDefault() method is used to stop the default confirmation dialog from appearing, while the returnValue property is used to customize the message displayed in the confirmation dialog.<\/p>\n<p>In summary, the onunload event is triggered when a page is closed or refreshed to carry out clean-up operations, while the onbeforeunload event is triggered before a page is closed or refreshed to prompt the user if they want to leave the current page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The onunload event is triggered when the browser window is closed or refreshed. It can be used to perform cleanup operations, such as closing database connections or saving user data. When this event is triggered, the page&#8217;s resources and documents will be destroyed. The onbeforeunload event is triggered in the browser window before it is [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[18520,18517,18518,18519,326],"class_list":["post-13799","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-browser-events","tag-javascript-events","tag-onbeforeunload","tag-onunload","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>onbeforeunload vs onunload Events Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how JavaScript onbeforeunload and onunload events work. Prevent accidental data loss with user prompts and cleanup tasks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"onbeforeunload vs onunload Events Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how JavaScript onbeforeunload and onunload events work. Prevent accidental data loss with user prompts and cleanup tasks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T07:54:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-05T23:39:43+00:00\" \/>\n<meta name=\"author\" content=\"Benjamin Taylor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin Taylor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/\"},\"author\":{\"name\":\"Benjamin Taylor\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\"},\"headline\":\"onbeforeunload vs onunload Events Guide\",\"datePublished\":\"2024-03-15T07:54:05+00:00\",\"dateModified\":\"2025-08-05T23:39:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/\"},\"wordCount\":278,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"browser events\",\"JavaScript events\",\"onbeforeunload\",\"onunload\",\"web development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/\",\"name\":\"onbeforeunload vs onunload Events Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T07:54:05+00:00\",\"dateModified\":\"2025-08-05T23:39:43+00:00\",\"description\":\"Learn how JavaScript onbeforeunload and onunload events work. Prevent accidental data loss with user prompts and cleanup tasks.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"onbeforeunload vs onunload Events Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\",\"name\":\"Benjamin Taylor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"caption\":\"Benjamin Taylor\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"onbeforeunload vs onunload Events Guide - Blog - Silicon Cloud","description":"Learn how JavaScript onbeforeunload and onunload events work. Prevent accidental data loss with user prompts and cleanup tasks.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/","og_locale":"en_US","og_type":"article","og_title":"onbeforeunload vs onunload Events Guide","og_description":"Learn how JavaScript onbeforeunload and onunload events work. Prevent accidental data loss with user prompts and cleanup tasks.","og_url":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T07:54:05+00:00","article_modified_time":"2025-08-05T23:39:43+00:00","author":"Benjamin Taylor","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Benjamin Taylor","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/"},"author":{"name":"Benjamin Taylor","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9"},"headline":"onbeforeunload vs onunload Events Guide","datePublished":"2024-03-15T07:54:05+00:00","dateModified":"2025-08-05T23:39:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/"},"wordCount":278,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["browser events","JavaScript events","onbeforeunload","onunload","web development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/","url":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/","name":"onbeforeunload vs onunload Events Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T07:54:05+00:00","dateModified":"2025-08-05T23:39:43+00:00","description":"Learn how JavaScript onbeforeunload and onunload events work. Prevent accidental data loss with user prompts and cleanup tasks.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/explanation-of-onunload-and-onbeforeunload-events\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"onbeforeunload vs onunload Events Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9","name":"Benjamin Taylor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","caption":"Benjamin Taylor"},"url":"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/13799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=13799"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/13799\/revisions"}],"predecessor-version":[{"id":157807,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/13799\/revisions\/157807"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=13799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=13799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=13799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}