mirror of
https://github.com/denoland/deno.git
synced 2024-11-01 09:24:20 -04:00
4f46dc999b
This commit fixes order of events for "onload" event. Previously handler attached using "window.onload" was always fired before handlers added using "addEventListener".
78 lines
2.1 KiB
Markdown
78 lines
2.1 KiB
Markdown
## Program lifecycle
|
|
|
|
Deno supports browser compatible lifecycle events: `load` and `unload`. You can
|
|
use these events to provide setup and cleanup code in your program.
|
|
|
|
Listeners for `load` events can be asynchronous and will be awaited. Listeners
|
|
for `unload` events need to be synchronous. Both events cannot be cancelled.
|
|
|
|
Example:
|
|
|
|
**main.ts**
|
|
|
|
```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)`);
|
|
};
|
|
|
|
console.log("log from main script");
|
|
```
|
|
|
|
**imported.ts**
|
|
|
|
```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 the example:
|
|
|
|
```shell
|
|
$ deno run main.ts
|
|
log from imported script
|
|
log from main script
|
|
got load event in event handler (imported)
|
|
got load event in event handler (main)
|
|
got load event in onload function (main)
|
|
got unload event in event handler (imported)
|
|
got unload event in event handler (main)
|
|
got unload event in onunload function (main)
|
|
```
|
|
|
|
All listeners added using `window.addEventListener` were run, but
|
|
`window.onload` and `window.onunload` defined in `main.ts` overrode handlers
|
|
defined in `imported.ts`.
|
|
|
|
In other words, you can register multiple `window.addEventListener` `"load"` or
|
|
`"unload"` events, but only the last loaded `window.onload` or `window.onunload`
|
|
events will be executed.
|