From c920c5f62aba7eee0f6fa70f68f701e204ac1a9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bartek=20Iwa=C5=84czuk?= Date: Wed, 2 Oct 2019 17:32:51 +0200 Subject: feat: window.onunload (#3023) --- website/manual.md | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) (limited to 'website') diff --git a/website/manual.md b/website/manual.md index 7a659460c..dabb08e41 100644 --- a/website/manual.md +++ b/website/manual.md @@ -928,6 +928,76 @@ window.onload = async function() { $ deno run --importmap=import_map.json hello_server.ts ``` +## Program lifecycle + +Deno supports browser compatible lifecycle events: `load` and `unload`. You can +use these event to provide setup and cleanup code in your program. + +`load` event listener supports asynchronous functions and will await these +functions. `unload` event listener supports only synchronous code. Both events +are not cancellable. + +Example: + +```typescript +// main.ts +import "./imported.ts"; + +const handler = (e: Event): void => { + console.log(`got ${e.type} event in event handler (main)`); +}; + +window.addEventListener("load", handler); + +window.addEventListener("unload", handler); + +window.onload = (e: Event): void => { + console.log(`got ${e.type} event in onload function (main)`); +}; + +window.onunload = (e: Event): void => { + console.log(`got ${e.type} event in onunload function (main)`); +}; + +// imported.ts +const handler = (e: Event): void => { + console.log(`got ${e.type} event in event handler (imported)`); +}; + +window.addEventListener("load", handler); +window.addEventListener("unload", handler); + +window.onload = (e: Event): void => { + console.log(`got ${e.type} event in onload function (imported)`); +}; + +window.onunload = (e: Event): void => { + console.log(`got ${e.type} event in onunload function (imported)`); +}; + +console.log("log from imported script"); +``` + +Note that you can use both `window.addEventListener` and +`window.onload`/`window.onunload` to define handlers for events. There is a +major difference between them, let's run example: + +```shell +$ deno main.ts +log from imported script +log from main script +got load event in onload function (main) +got load event in event handler (imported) +got load event in event handler (main) +got unload event in onunload function (main) +got unload event in event handler (imported) +got unload event in event handler (main) +``` + +All listeners added using `window.addEventListener` were run, but +`window.onload` and `window.onunload` defined in `main.ts` overridden handlers +defined in `imported.ts`. + ## Internal details ### Deno and Linux analogy -- cgit v1.2.3