プログラムのライフサイクル

Deno はブラウザと互換性のあるライフサイクルイベントをサポートしています。load と unload です。これらのイベントはプログラム内でコードのセットアップとクリーンアップを提供するために使うことができます。

load イベントのリスナーは非同期関数を与えることができ、await を使うことが可能です。 unload イベントのリスナーは同期関数を与える必要があります。両者ともイベントをキャンセルできません。

例:

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)`);
};

console.log("log from main script");
  

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");
  

イベントハンドラーを定義するために window.addEventListenerを使うことも window.onload/window.onunload を使うこともできる点に留意してください。両者には違いがあります。例を実行してみましょう。

$ deno run 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)
  

window.addEventListener を使って追加されたリスナーはすべて実行されましたが、 window.onload と window.onunload のほうは main.ts で定義されたハンドラーが imported.ts で定義されたハンドラーを上書きしました。

言い換えると、window.addEventListener は複数の "load" と "unload" イベントを登録できますが、window.onload と window.onunload は最後に登録されたイベントだけが実行されます。