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:
var focus_rel = focusEvent.relatedTarget;
gdzie poszczególne człony oznaczają:
focus_rel- dodatkowy obiekt powiązany ze zdarzeniem.focusEvent- zdarzenie będące obiektem kontekstu.
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:
<!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#
readonly attribute EventTarget? relatedTarget;