Event#
Event.type#
Właściwość type zwraca w postaci tekstowej typ zdarzenia (czyli nazwę) dla danego zdarzenia. 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_type = event.type;
gdzie poszczególne człony oznaczają:
event_type- łańcuch znakowy reprezentujący typ zdarzenia dla danego zdarzenia (czuły na wielkość znaków).event- zdarzenie będące obiektem kontekstu.
Przy tworzeniu zdarzenia wartością domyślną dla właściwości type musi być pusty łańcuch znakowy.
Typ zdarzenia to tak naprawdę obiekt zdarzenia o określonej nazwie i który definiuje szczegółowe warunki wywołania, właściwości, oraz inne cechy, które odróżniają go od innych typów zdarzeń. Typy zdarzeń mogą być definiowane przez specyfikacje (np. D3E), aplikacje klienckie lub przez nas samych. Dla przykładu, typ zdarzenia click ma inną charakterystykę niż typ zdarzenia mouseover czy load.
Typu zdarzenia nie należy mylić z nazwą interfejsu, po którym dane zdarzenie dziedziczy w chwili tworzenia. Dla przykładu, zdarzenie z typem focus dziedziczy po interfejsie FocusEvent, podobnie zresztą jak zdarzenie typu blur.
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 += "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 DOMString type;