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.
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
Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.