Zdarzenia#
Typ unload#
| Typ: | unload |
|---|---|
| Interfejs: | UIEvent jeśli generowane z interfejsu użytkownika, w przeciwnym razie Event. |
| Sync / Async: | Sync |
| Bąbelkowanie | Nie |
| Zaufane cele | defaultView, Document, Element |
| Anulowanie | Nie |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu unload musi zostać wysłane przez aplikację kliencką w chwili, kiedy implementacja DOM usuwa ze środowiska zasoby (np. dokument) lub wszelkie zasoby zależne (takie jak obrazy, arkusze stylów, skrypty). Dokument musi zostać usunięty dopiero po wysłaniu tego zdarzenia. Jeśli zdarzenie typu unload jest wysyłane to implementacje zobligowane są do wysłania tego zdarzenia co najmniej do węzła typu Document.
W przypadku HTML5 zdarzenie typu unload jest automatycznie odpalane przez przeglądarki internetowe jedynie dla obiektów Window (z nadpisaniem celu zdarzenia na obiekt Document), kiedy powiązane z nimi dokumenty mają zostać usunięte. Opisywane jest to w kroku 7 algorytmu usuwania dokumentu. Algorytm ten będzie wywoływany jako jeden z kroków w innych algorytmach.
Z praktycznego punktu widzenia usunięcie dokumentu można spowodować poprzez:
- Bezpośrednią nawigację do innej strony lub przy użyciu odsyłacza.
- Zamykając aktualne okno lub kartę.
- Odświeżając daną stronę.
- Zmianę poszczególnych części adresu URL aktualnie załadowanej strony przy użyciu obiektu
Location. - Otworzenie nowego dokumentu w tym samym oknie, np. za pomocą metody
Window.open()lubDocument.open(). - Innych specyficznych poleceń uruchamianych po stronie JavaScript.
Na chwilę obecną jedynie przeglądarka IE11 obsługuje zdarzenie typu unload bez żadnych ograniczeń. W przypadku Firefoksa i Chrome zablokowano możliwość tworzenia z poziomu funkcji zwrotnej wszelkich okien dialogowych blokujących interfejs użytkownika, chociaż inne mniej inwazyjne polecenia działają bez problemu. W związku z tym poniższe przykłady najlepiej testować w Firefoksie lub Chrome z włączoną konsolą.
Dla Chrome trzeba włączyć w ustawieniach Narzędzi dla programistów opcję Console: Preserve log upon navigation. Dzięki temu logi nie będą automatycznie czyszczone po przeładowaniu strony i dodatkowo rezultaty z zablokowanych poleceń zostaną przekazane do konsoli.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Usuń stronę poprzez jedną z niżej wymienionych czynności:</p>
<ul>
<li>Zamknięcie okna lub karty.</li>
<li>Odświeżenie strony.</li>
<li>Wczytanie nowego dokumentu z poziomu paska adresowego lub paska zakładek.</li>
<li>Wczytanie nowego dokumentu za pomocą odsyłacza <a href="http://www.w3.org">w3.org</a>.</li>
</ul>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia (obserwuj też w konsoli):</p>
<p id="info"></p>
<script>
var info = document.getElementById("info");
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
console.log(data);
alert(data);
}
window.addEventListener("unload", readInfo, false); // faza celu - trzeci argument nieistotny
document.addEventListener("unload", readInfo, true); // uchwyt nie zostanie wywołany
document.addEventListener("unload", readInfo, false); // uchwyt nie zostanie wywołany
document.body.addEventListener("unload", readInfo, false); // uchwyt nie zostanie wywołany
</script>
</body>
</html>Trzeba nadmienić, że uchwyty przez właściwość i uchwyty przez atrybut, które zarejestrowano na elemencie <body> lub elementach ramek, są traktowane tak jakby zarejestrowano je na obiekcie Window, który je zawiera. Uwaga nie dotyczy uchwytów przez metodę.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Usuń stronę poprzez jedną z niżej wymienionych czynności:</p>
<ul>
<li>Zamknięcie okna lub karty.</li>
<li>Odświeżenie strony.</li>
<li>Wczytanie nowego dokumentu z poziomu paska adresowego lub paska zakładek.</li>
<li>Wczytanie nowego dokumentu za pomocą odsyłacza <a href="http://www.w3.org">w3.org</a>.</li>
</ul>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia (obserwuj też w konsoli):</p>
<p id="info"></p>
<script>
var info = document.getElementById("info");
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
console.log(data);
alert(data);
}
document.body.onunload = readInfo;
document.body.addEventListener("onunload", readInfo, true); // uchwyt nie zostanie wywołany
document.body.addEventListener("onunload", readInfo, false); // uchwyt nie zostanie wywołany
</script>
</body>
</html>