FocusEvent#

FocusEvent.relatedTarget#

Właściwość relatedTarget zwraca dodatkowy obiekt powiązany z danym zdarzeniem. Jeśli dodatkowy obiekt nie został przekazany w czasie tworzenia zdarzenia, to zwracana będzie wartość null. Właściwość jest tylko do odczytu.

Składnia#

Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
var focus_rel = focusEvent.relatedTarget;

gdzie poszczególne człony oznaczają:

Przy tworzeniu zdarzenia wartością domyślną dla właściwości relatedTarget musi być wartość null.

W czasie wysyłania zaufanych zdarzeń wartość przechowywana we właściwości relatedTarget zależy od konkretnego typu zdarzenia. Najczęściej będzie wskazywała na poprzednie/następne obiekty, które miały/uzyskają zogniskowanie (jeśli istnieją). Ze względów bezpieczeństwa przy zmianie zogniskowania między pozagnieżdżanymi kontekstami przeglądania (np. osadzonymi ramkami) aplikacje klienckie powinny ustawić właściwość relatedTarget na wartość null.

W przypadku syntetycznych zdarzeń możemy samodzielnie ustawić dodatkowy obiekt powiązany ze zdarzeniem, np. w czasie tworzenia lub inicjowania zdarzenia.

Prosty przykład:

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

<head>

	<style>

		input:focus {outline: 5px solid green;}

	</style>

	<script>

		// Uruchom po całkowitym załadowaniu dokumentu
		window.onload = function(){

			var input1 = document.getElementById("input1");
			var input2 = document.getElementById("input2");
			var input3 = document.getElementById("input3");
			var info = document.getElementById("info");

			function readInfo(e){

				var data = "Interfejs: " + e
					+ "<br>" + "e.type: " + e.type
					+ "<br>" + "e.target: " + e.target
					+ "<br>" + "e.target.value: " + e.target.value
					+ "<br>" + "e.relatedTarget: " + e.relatedTarget;

				if (e.relatedTarget){
					data += "<br>" + "e.relatedTarget.value: " + e.relatedTarget.value;
				}

				data += "<br>" + "e.currentTarget: " + e.currentTarget
					+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";

				info.innerHTML = data + info.innerHTML;

			}

			input1.addEventListener("focus", readInfo, false);
			input2.addEventListener("focus", readInfo, false);
			input3.addEventListener("focus", readInfo, false);

		}

	</script>

</head>

<body>

	<p>Zmień zogniskowanie w kontrolkach przy użyciu tabulatora lub myszy.</p>
	<input id="input1" type="text" value="Pierwsza kontrolka">
	<input id="input2" type="text" value="Druga kontrolka">
	<input id="input3" type="text" value="Trzecia kontrolka">

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

</body>

</html>

Na chwilę obecną jedynie przeglądarka Chrome prawidłowo obsługuje właściwość relatedTarget dla wszystkich typów zdarzeń zaliczanych do modułu zdarzeń zogniskowania.

Interfejs Web IDL#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
readonly attribute EventTarget? relatedTarget;

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

FocusEvent (H1) FocusEvent.relatedTarget (H2) Składnia (H3) Interfejs Web IDL (H3) Specyfikacje i inne materiały (H3)