Obiekt event to chyba najczęściej po document używany obiekt w języku JavaScript. Dzięki temu obiektowi możemy w łatwy sposób przechwycić wiele informacji o danym zdarzeniu. Przykłady zastosowania obiektu event pokazałem w artykule o skrótach klawiturowych, a także o gestach myszy.

Aby samemu pisać skrypty i dobrze wykorzystywać możliwości jakie oferuje nam obiekt event, powinniśmy zapoznać się z jego właściwościami.

Współrzędne zdarzenia

Najczęściej wykorzystujemy chyba właściwości pageX, pageY. Zawierają współrzędne strony przeglądania w których zostało wywołane zdarzenie (kliknięcie itp.).

Podobne dane zawierają właściwości clientX i clientY. Rożnica jest taka, że we właściwościach pageX i pageY są przechowywane współrzędne dla strony, a w clientX i clientY współrzędne okna przeglądania. Różnica ta na pierwszy rzut oka może być niewidoczna. Dostrzec ją można dopiero przy stronach z paskiem przeiwjania w pionie.

Możemy też określić współrzędne ekranu, w których zostało wywołane zdarzenie. Dokonamy tego za pomocą właściwości screenX i screenY.

Zobacz demo

Ctrl, Shift, Alt

Bardzo przydatnymi właściwościami są także ctrlKey, shiftKey, altKey - możemy za ich pomocą sprawdzić, czy w czasie wywoływania zdarzenia był zablokowany (przyciśnięty) przycisk Ctrl (Control), Shift czy Alt. Parametry te przyjmują wartości typu boolean, czyli: true albo false.

Dzięki tym właściwościom możemy dodać na stronie ciekawe skróty klawiaturowe.

Istnieje jeszcze jeden parametr: metaKey, który mówi o tym, czy jest aktywny tzw. klawisz meta, który istniał w klawiaturach firmy Sun Microsystems. W nowych urządzeniach nie jest on już jednak umieszczany, więc nie zaleca się stosowania tego parametru, gdyż dla większości użytkowników będzie to bezużyteczne.

Zobacz demo 

Który przycisk myszy?

Właściwość, która przechowuje informacje o tym, który przycisk myszy został wciśnięty, to właściwość button. Zawiera ona wartość 0, 1 albo 2 dla lewego, środkowego i prawego przycisku myszy.

Jak zwykle swoją własną, krętą drogą poszedł microsoft definiując wartości 1, 4 i 2 :/

Zdarzenia

Oficjalnie to obiekt event jest właścicielem zestawu właściwości służących za przypisywanie akcji do odpowiednich zdarzeń. Jednak chcąc np. przypisać do obiektu o id element akcję dla kliknięcia nie uczynimy tego poprzez:

event.onclick = function() { alert('Klik!'); };

(nawet nie wiadomo do jakiego obiektu przypisujemy zdarzenie!), tylko poprzez:

document.getElementById('element').onclick = function() { alert('Klik!'); };

Dlatego też sądzę, że właściwości te zostały trochę niepoprawnie opisane w dokumentacji.

Inne właściwości

Obiekt event posiada jeszcze trochę właściwości. Jednak część z nich jest dość nieprzydatnych, a także źle obsługiwanych przez niektóre przeglądarki (głównie IE :/).

Każdy zdrowo myślący twórca kodu JS dzisiaj skorzystałby pewnie z jQuery czy dojo toolkit, które to biblioteki oferują zestaw doskonale działających rozwiązań działających na każdej przeglądarce >= IE 6 :)

Jeśli jednak chcecie zapoznać się z innymi atrybutami, ponownie odsyłam do dokumentacji :)