Autor: Paweł Rajewski

Osoby początkujące w zakresie JScript-u rzadko korzystają z obiektu event. I nic dziwnego, bo event to obiekt nietypowy i często wymykający się mniej zaawansowanym twórcom stron www. Do czego więc służy?

Event to „centrum informacji o zdarzeniach”. Gdy na stronie zachodzi zdarzenie, np. onclick, w serwisie tworzony jest obiekt event – zbiór danych na temat tego co się wydarzyło. Ale te dane dostępne są bardzo krótko – jedynie do czasu, gdy zdarzenie zakończy swoją wędrówkę poprzez strukturę dokumentu (patrz artykuł „Bąblujące zdarzenia”). Gdy to nastąpi, obiekt event jest likwidowany i znika wraz ze „swoim” zdarzeniem. Wynika stąd, że do obiektu event można odwołać się wyłącznie z funkcji uruchomionej przez zdarzenie. W innym przypadku nastąpi błąd – okaże się, że obiekt o takiej nazwie nie istnieje. Podobnie, komunikatem o błędzie, zakończy się próba dostępu do obiektu event innego okna (np. nadrzędnego). Jest niemal pewne, że w chwili wywołania obiektu event tam nie będzie.

Po co korzystać z obiektu event? Przede wszystkim dlatego, że dostarcza on wielu cennych informacji o zdarzeniu – bądź niedostępnych w inny sposób, bądź znacznie upraszczających konstrukcję strony. Powiedzmy, że mamy na stronie 50 paragrafów tekstu i chcielibyśmy wiedzieć, który z nich został kliknięty. Przypisać każdemu zdarzenie onclick? Nie trzeba – obiekt event „wie” jaki element strony wywołał zdarzenie. Chcemy wiedzieć, w którym miejscu strony kliknięto – na dole? Na górze? Z boku? Musielibyśmy zapełnić stronę obiektami i każdemu przypisać onclick, aby się tego dowiedzieć. A obiekt event powie nam to bez trudu, nawet jeśli strona będzie pusta. Trzeba odróżnić kliknięcie prawym przyciskiem myszki, lewym, obydwoma? Proszę bardzo. Wykryć, który klawisz klawiatury wciśnięto? Żaden problem. Zakres stosowania obiektu event jest bardzo szeroki.

Informacje zawarte w obiekcie event (zwane właściwościami) można odczytać, a niektóre także zapisać sterując, w pewnym stopniu, przebiegiem zdarzenia. Zbiór informacji zawartych w obiekcie jest stały, a ponieważ obiekt powoływany jest do życia przez różne zdarzenia, nie wszystkie „pozycje” bywają wypełnione. Trzeba o tym pamiętać i nie odwoływać się do informacji (właściwości), które w danym przypadku mogą nie być uaktualniane. Takie odwołanie może spowodować błąd.

W strukturze serwisu obiekt event mieści się powyżej obiektu document, w ramach obiektu window. Stąd pełne, poprawne odwołanie do niego to:

window.event.właściwość

Oto wybrane informacje (właściwości) udostępniane przez obiekt event (podane właściwości funkcjonują w Internet Explorerze 5.5. Dla starszych przeglądarek sprawdź obecność i działanie właściwości zanim ją wykorzystasz).

Informacje związane z klawiaturą:

window.event.altKey ; window.event.ctrlKey ; window.event.shiftKey

Zwraca informację czy w momencie wystąpienia zdarzenia wciśnięty był klawisz (odpowiednio) ALT, CTRL, SHIFT. Wynik: true lub false.

window.event.altLeft ; window.event.ctrlLeft ; window.event.shiftLeft

Zwraca informację czy w momencie wystąpienia zdarzenia wciśnięty był klawisz (odpowiednio) lewy ALT, lewy CTRL, lewy SHIFT. Wynik: true lub false. altLeft i ctrlLeft działają tylko w niektórych systemach operacyjnych – nie funkcjonują w Windows95 i 98. shiftLeft działa tylko ze zdarzeniami onkeydown, onkeyup.

window.event.keyCode

Zwraca liczbowy kod klawisza, który został wciśnięty, zgodny ze standardem Unicode. Działa tylko ze zdarzeniami onkeydown, onkeyup, onkeypress.

window.event.repeat

Zwraca informację czy naciskany klawisz został powtórzony (chodzi o powtarzanie automatyczne mające miejsce gdy klawisz jest przytrzymywany w pozycji wciśniętej). Wynik: true lub false. Działa tylko ze zdarzeniem onkeydown.

Przykład:

<HTML> 
<BODY onkeydown="window.document.body.innerText+=(window.event.keyCode+' 
');"> 
</BODY> 
</HTML> 

Na ekranie będą wypisywane kody klawiszy, które naciskasz. Możesz zmienić zdarzenie na onkeypress i zobaczyć różnice.

Informacje związane z myszą:

window.event.button

Zwraca informację, który z przycisków myszki został wciśnięty wg kodu: 0 – żaden, 1 – lewy, 2 – prawy, 3 – lewy i prawy, 4 – środkowy, 5 – lewy i środkowy, 6 – prawy i środkowy, 7 – lewy, prawy i środkowy. Działa tylko ze zdarzeniami onmousedown, onmouseup, onmousemove.

Przykład:

<HTML> 
<BODY 
onmousedown="window.document.body.innerText+=(window.event.button+' 
');"> 
</BODY> 
</HTML> 

Na ekranie będą wypisywane kody naciskanych klawiszy myszki. Spróbuj naciskać je i puszczać w różnej kolejności.

Informacje związane z położeniem kursora:

window.event.screenX ; window.event.screenY

Zwraca współrzędną (odpowiednio) X lub Y kursora, w pikselach, względem lewego górnego rogu ekranu.

window.event.clientX ; window.event.clientY

Zwraca współrzędną (odpowiednio) X lub Y kursora, w pikselach, względem lewego górnego rogu części roboczej okna (lub ramki jeśli strona umieszczona jest w ramce).

window.event.x ; window.event.y

Zwraca współrzędną (odpowiednio) X lub Y kursora, w pikselach, względem lewego górnego rogu najbliższego nadrzędnego obiektu o położeniu relative zawierającego obiekt wywołujący zdarzenie. Gdy brak takiego obiektu zwracana wartość zależy od modelu przeglądarki – względem lewego górnego rogu części roboczej okna lub względem lewego górnego rogu obiektu BODY.

Mezzmo - filmy i muzyka z PC na TV i DLNA
window.event.offsetX ; window.event.offsetY

Zwraca współrzędną (odpowiednio) X lub Y kursora, w pikselach, względem górnego lewego rogu obiektu, z którego wywołano zdarzenie.

Odczytywane współrzędne mogą zależeć od konstrukcji strony, rodzaju pozycjonowania obiektu, rodzaju obiektów nadrzędnych itd. Dokładny opis pozycjonowania obiektów i związanych tym właściwości wykracza poza ramy artykułu. Dla osób początkujących najbezpieczniejszy odczyt współrzędnych, niosący najmniej niespodzianek, to sposób clientX i clientY. Aby uzyskać wyniki względem początku strony, można stosować zapis: window.event.clientX+window.document.body.scrollLeft dla współrzędnej poziomej, oraz window.event.clientY+window.document.body.scrollTop dla współrzędnej pionowej.

Przykład:

<HTML> 
<BODY 
onclick="window.document.all('kwadrat').style.left=window.event.clientX-25; 
window.document.all('kwadrat').style.top=window.event.clientY-25;"> 
<DIV ID="kwadrat" STYLE="width: 50px; height: 50px; position: 
absolute; background: #FF0000;"></DIV> 
</BODY> 
</HTML> 

Czerwony kwadrat będzie przeskakiwał tam, gdzie klikniesz.

Informacje związane z wywołaniem zdarzenia:

window.event.srcElement

Zwraca obiekt, w ramach którego wywołano zdarzenie.

Przykład:

<HTML> 
<BODY 
onclick="window.event.srcElement.style.background='#0000FF'"> 
<DIV STYLE="width: 50px; height: 50px; position: absolute; background: 
#FF0000;"></DIV> 
<DIV STYLE="width: 50px; height: 50px; position: absolute; left: 100; 
top: 100; background: #FF0000;"></DIV> 
<DIV STYLE="width: 50px; height: 50px; position: absolute; left: 200; 
top: 300; background: #FF0000;"></DIV> 
<DIV STYLE="width: 50px; height: 50px; position: absolute; left: 400; 
top: 200; background: #FF0000;"></DIV> 
</BODY> 
</HTML> 

Kliknięty obiekt zmieni kolor na niebieski. Zwróć uwagę, że żaden z obiektów DIV nie ma zapisu onclick. Zdarzenie przechwytywane jest w obiekcie BODY, a obiekt event informuje skąd „wypłynęło”.

window.event.fromElement

Zwraca obiekt, który został opuszczony przez kursor w chwili wywoływania zdarzenia. Działa ze zdarzeniami onmouseover, onmouseout.

window.event.toElement

Zwraca obiekt, do którego przesunął się kursor w chwili wywoływania zdarzenia. Działa ze zdarzeniami onmouseover, onmouseout.

Przykład:

<HTML> 
<BODY STYLE="background: #0000FF" 
onmouseover="window.event.toElement.style.background='#FFFFFF'; 
if(window.event.fromElement){window.event.fromElement.style.background='#FF0000';};"> 
<DIV STYLE="width: 50px; height: 50px; position: absolute; background: 
#0000FF;"></DIV> 
<DIV STYLE="width: 50px; height: 50px; position: absolute; left: 100; 
top: 100; background: #0000FF;"></DIV> 
<DIV STYLE="width: 50px; height: 50px; position: absolute; left: 200; 
top: 300; background: #0000FF;"></DIV> 
<DIV STYLE="width: 50px; height: 50px; position: absolute; left: 400; 
top: 200; background: #0000FF;"></DIV> 
</BODY> 
</HTML> 

Gdy wchodzisz kursorem do obiektu zmienia on kolor na biały. Gdy go opuszczasz zmienia kolor na czerwony. Obiekty, w których jeszcze nie byłeś są niebieskie.

window.event.type

Zwraca nazwę zdarzenia, które zaszło. Wynik nie zawiera przedrostka „on” (np. w przypadku zdarzenia onclick będzie to click). Dzięki tej informacji można np. pokierować przebiegiem funkcji zależnie od tego czy użytkownik wywołał ją myszką czy z klawiatury.

Sterowanie przebiegiem zdarzenia

window.event.returnValue

– pozwala ustawić wartość zwracaną przez zdarzenie. W niektórych przypadkach, gdy zdarzenie posiada domyślną akcję, ustawienie tej wartości na false sprawia, że domyślna akcja nie zostanie wykonana. Np.:

oncontextmenu="window.event.returnValue=false;" 

…spowoduje, że po kliknięciu obiektu prawym klawiszem myszki nie pojawi się nad nim menu kontekstowe.

<A HREF="strona.html" onclick="alert('KLIK i nic!'); 
window.event.returnValue=false;">Link</A>

…spowoduje, że po kliknięciu linku nie zostanie wyświetlona nowa strona.

window.event.cancelBubble

Ustawienie tej wartości na true pozwala „zatrzymać” zdarzenie i uniemożliwia jego przepłynięcie do obiektów położonych wyżej w strukturze dokumentu (patrz artykuł „Bąblujące zdarzenia”).

Obiekt event posiada jeszcze kilka innych, bardziej „egzotycznych” właściwości, ale nie mają one większego znaczenia w warunkach amatorskich. Podane wyżej stanowią zdecydowanie najczęściej używane i najpraktyczniejsze.

Mam nadzieję, że po kilku eksperymentach polubisz ulotny obiekt event.

Paweł Rajewski

Skasowane dane to nie zawsze tragedia - ściągnij program i odzyskaj dane