Event#
Event.target#
Właściwość target zwraca obiekt będący celem zdarzenia dla danego zdarzenia. Jeśli zdarzenie nie zostało wysłane 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 event_target = event.target;
gdzie poszczególne człony oznaczają:
event_target- cel zdarzenia.event- zdarzenie będące obiektem kontekstu.
Przy tworzeniu zdarzenia wartością domyślną dla właściwości target musi być wartość null.
Cel zdarzenia to obiekt, dla którego dane zdarzenie zostało utworzone i do którego jest wysyłane. Zgodnie z mechanizmem przepływu zdarzeń cel zdarzenia będzie osiągany jedynie dla fazy celu. Obiekt ten będzie implementował interfejs EventTarget, czyli możliwe będzie podpięcie do niego jakiegoś uchwytu zdarzenia.
Celu zdarzenia nie należy mylić z aktualnym celem zdarzenia. Obydwie właściwości będą jednakowe tylko i wyłącznie w sytuacji, kiedy zdarzenie osiąga swój cel. Niemniej jednak aktualny cel zdarzenia wskazuje także na obiekty, których obsługa może być wywoływana w fazie przechwytywania lub fazie bąbelkowania.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
// Uruchom po całkowitym załadowaniu dokumentu
window.onload = function(){
var button = document.getElementById("press");
var info = document.getElementById("info");
button.addEventListener("click", function(e){
info.innerHTML += "Interfejs zdarzenia e: " + e // [object MouseEvent]
+ "<br>" + "e.type: " + e.type // click
+ "<br>" + "e.bubbles: " + e.bubbles // true
+ "<br>" + "e.cancelable: " + e.cancelable // true
+ "<br>" + "e.defaultPrevented: " + e.defaultPrevented // false
+ "<br>" + "e.isTrusted: " + e.isTrusted // true
+ "<br>" + "e.eventPhase: " + e.eventPhase // 2
+ "<br>" + "e.timeStamp: " + e.timeStamp // liczba całkowita z wartością zależną od chwili uruchomienia przykładu
+ "<br>" + "e.currentTarget: " + e.currentTarget // [object HTMLInputElement]
+ "<br>" + "e.target: " + e.target; // [object HTMLInputElement]
e.preventDefault();
info.innerHTML += "<br><br>" + "e.defaultPrevented: " + e.defaultPrevented; // true
}, false);
window.addEventListener("click", function(e){
info.innerHTML += "<br><br>" + "Interfejs zdarzenia e: " + e // [object MouseEvent]
+ "<br>" + "e.currentTarget: " + e.currentTarget // [object Window]
+ "<br>" + "e.target: " + e.target // [object HTMLInputElement]
+ "<br>" + "e.timeStamp: " + e.timeStamp; // liczba całkowita z wartością zależną od chwili uruchomienia przykładu
}, false);
}
</script>
</head>
<body>
<p>Kliknij w przycisk by uzyskać szczegółowe informacje dla zdarzenia.</p>
<input id="press" type="button" value="Kliknij mnie!">
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
</body>
</html>Interfejs Web IDL#
readonly attribute EventTarget? target;