Zdarzenia#

Typ load#

Typ:load
Interfejs:UIEvent jeśli generowane z interfejsu użytkownika, w przeciwnym razie Event.
Sync / Async:Async
BąbelkowanieNie
Zaufane celedefaultView, Document, Element
AnulowanieNie
Domyślna akcjaBrak
Kontekst
(zaufane zdarzenia)

Zdarzenie typu load musi zostać wysłane przez aplikację kliencką w chwili, kiedy implementacja DOM zakończyła wczytywanie zasobu (np. dokumentu) i wszystkich powiązanych z nim zasobów (np. obrazów, arkuszy stylów czy skryptów). Powiązane zasoby, których wczytanie się nie powiodło, nie mogą przerywać odpalenia tego zdarzenia jeśli zasób, który je wczytywał, wciąż jest dostępny przez DOM. Jeśli zdarzenie typu load 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 load jest automatycznie odpalane przez przeglądarki internetowe w oparciu o następujące zasady:

Dla dokumentów

Zgodnie z krokiem 7.2 w algorytmie zatrzymania parsowania, jeśli obiekt Document znajduje się w kontekście przeglądania, to należy utworzyć zaufane zdarzenie z nazwą load, które implementuje interfejs Event, nie zezwala na bąbelkowanie i anulowanie, a następnie wysłać je do obiektu Window, z którym powiązany jest obiekt Document, z jednoczesnym nadpisaniem celu zdarzenia na obiekt Document.

Reguła dość zawiła, ale na jej podstawie można wysnuć dwa najważniejsze wnioski:

  • Zdarzenie sygnalizujące wczytanie dokumentu wysyłane jest jedynie do obiektu Window, dlatego uchwyty zdarzeń rejestrowane na innych obiektach dla tego zdarzenia nie zostaną wywołane. Uchwyty rejestrowane na obiekcie Window zostaną wywołane w chwili, kiedy zdarzenie osiągnie fazę celu.
  • Zdarzenie sygnalizujące wczytanie dokumentu kierowane jest do obiektu Window, chociaż cel zdarzenia (właściwość Event.target) będzie wskazywał na obiekt Document. Próba przechwycenia tego zdarzenia uchwytem rejestrowanym na obiekcie Document nie powiedzie się. Warto o tym pamiętać.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>
</head>

<body>

	<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</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;

		}

		window.addEventListener("load", readInfo, false); // faza celu - trzeci argument nieistotny

		document.addEventListener("load", readInfo, true); // uchwyt nie zostanie wywołany (w IE11 jest błąd)
		document.addEventListener("load", readInfo, false); // uchwyt nie zostanie wywołany
		document.body.addEventListener("load", 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:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>
</head>

<body>

	<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</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;

		}

		document.body.onload = readInfo;

		document.body.addEventListener("load", readInfo, true); // uchwyt nie zostanie wywołany (w IE11 jest błąd)
		document.body.addEventListener("load", readInfo, false); // uchwyt nie zostanie wywołany

	</script>

</body>

</html>
Dla elementów

Elementy, które wczytują jakieś zasoby (np. <img>, <embed>, <script> itd.), także sygnalizują zakończenie tego procesu poprzez zdarzenie load. Całość jest bliźniaczo podobna do wcześniejszej reguły. Zdarzenie wysyłane jest do elementu, nie bąbelkuje i nie można go anulować. Co istotne, zdarzenie to przechodzi przez wszystkich przodków celu zdarzenia zgodnie ze ścieżką propagacji, dlatego może wywoływać uchwyty rejestrowane na tych przodkach. Wyjątkiem będzie obiekt Window, który z powodów historycznych musi zostać pominięty.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>
</head>

<body>

	<img src="../../logo.gif" alt="">

	<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
	<p id="info"></p>

	<script>

		var info = document.getElementById("info");
		var img = document.getElementsByTagName("img")[0];

		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;

		}

		// Przechwyt zdarzenia sygnalizującego wczytanie zdjęcia
		img.addEventListener("load", readInfo, false);
		document.addEventListener("load", readInfo, true);
		document.addEventListener("load", readInfo, false); // uchwyt nie zostanie wywołany

		// Przechwyt zdarzenia sygnalizującego wczytanie dokumentu
		window.addEventListener("load", readInfo, false);

	</script>

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Zdarzenia (H1) Typ load (H2) Specyfikacje i inne materiały (H3)