MouseEvent#
MouseEvent.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 mouse_rel = mouseEvent.relatedTarget;
gdzie poszczególne człony oznaczają:
mouse_rel- dodatkowy obiekt powiązany ze zdarzeniem.mouseEvent- 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. Dla zdarzeń typu mouseover lub mouseenter właściwość wskazuje na element, którego granicę wskaźnik myszy opuszcza. Dla zdarzeń mouseout lub mouseleave właściwość wskazuje na element, do granicy którego wskaźnik myszy wkracza. Dla pozostałych typów zdarzeń zawsze będzie zwracana domyślna wartość null.
W przypadku syntetycznych zdarzeń możemy samodzielnie ustawić stan aktywności klawisza zmiany dla zdarzenia, np. w czasie tworzenia lub inicjowania zdarzenia.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
input<span class="nocode">:focus</span> {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 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 && e.relatedTarget.tagName.toLowerCase() == "input"){
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("mouseover", readInfo, false);
input1.addEventListener("mouseenter", readInfo, false);
input1.addEventListener("mouseout", readInfo, false);
input1.addEventListener("mouseleave", readInfo, false);
input1.addEventListener("click", readInfo, false);
input2.addEventListener("mouseover", readInfo, false);
input2.addEventListener("mouseenter", readInfo, false);
input2.addEventListener("mouseout", readInfo, false);
input2.addEventListener("mouseleave", readInfo, false);
input2.addEventListener("click", readInfo, false);
input3.addEventListener("mouseover", readInfo, false);
input3.addEventListener("mouseenter", readInfo, false);
input3.addEventListener("mouseout", readInfo, false);
input3.addEventListener("mouseleave", readInfo, false);
input3.addEventListener("click", readInfo, false);
}
</script>
</head>
<body>
<p>Przemieszczaj wskaźnik myszy między kontrolkami (z ewentualnym kliknięciem) by uzyskać szczegółowe informacje dla zdarzenia.</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>Interfejs Web IDL#
readonly attribute EventTarget? relatedTarget;