Zdarzenia w JavaScript to pewne akcje, które są podejmowane w przeglądarce, w wyniku zaistnienia danej sytuacji, na przykład naciśnięcia klawisza na klawiaturze, myszce, najechanie kursorem na dany element strony, załadowanie strony internetowej itp. W języku JavaScript istnieje gotowy zestaw predefiniowanych zdarzeń. Jest ich dość dużo, a tylko wybrane są częściej używane. W niniejszym artykule zapoznaj się z rodzajami predefiniowanych zdarzeń, w następnym kroku dowiesz sie jak je wykorzystywać.
W poniższych tablicach wymieniono zdarzenia z podziałem na kategorie. Czcionką pogrubioną zaznaczono te, które są częściej wykorzystywane.
Zdarzenia związane z obsługą myszy
Zdarzenie
Opis
onclick
Zdarzenie zachodzi, gdy kliknięto na obiekcie.
oncontextmenu
Zdarzenie zachodzi dla kliknięcia prawym przyciskiem myszy dla wywołania menu kontekstowego.
ondblclick
Zdarzenie zachodzi, gdy kliknięto dwukrotnie na obiekcie.
onmousedown
To zdarzenie zachodzi, gdy kliknięto przed zwolnieniem klawisza (przydatne podczas przenoszenia elementów na stronie - moment wskazania obiektu do przeniesienia).
onmouseenter
Zdarzenie zachodzi, gdy wskaźnik myszy najedzie na obrazek.
onmouseleave
Zdarzenie zachodzi, gdy wskaźnik myszy opuszcza obszar obrazka.
onmousemove
Zdarzenie jest wyzwalane przy jakimkolwiek ruchu myszką.
onmouseover
Zdarzenie zachodzi, gdy wskaźnik myszy znajdzie się nad obiektem.
onmouseout
Zdarzenie zachodzi, gdy wskaźnik myszy opuścił obiekt.
onmouseup
Zwolnienie przycisku myszy (przydatne podczas przenoszenia elementów na stronie - moment upuszczenia).
Obiekty związane ze zdarzeniami MouseEvent
W związku z zajściem zdarzenia związanego z obsługą myszy możemy odczytywać pewne właściwości, które zostały zestawione w poniższej tablicy. Odczyt tych parametrów odbywa się poprzez obiekt event.
Właściwość
Opis
altKey
Informuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz ALT na klawiaturze.
button
Informuje, który przycisk myszy został naciśnięty (0 - lewy, 1 środkowy, 2 - prawy przycisk myszy, a w IE 8 i wcześniejszych wersjach: 1 - lewy, 2 - prawy, 4 - środkowy przycisk myszy).
buttons
Zwraca numer, który identyfikuje wciśnięty klawisz myszy.
clientX
Zwraca współrzędną x wskaźnika myszy względem danego okna.
clientY
Zwraca współrzędną y wskaźnika myszy względem danego okna.
ctrlKey
Informuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz CTRL na klawiaturze.
detail
Informuje ile razy klawisz myszy był naciśnięty.
metaKey
Brak opisu.
pageX
Zwraca współrzędną x wskaźnika myszy względem całego dokumentu.
pageY
Zwraca współrzędną y wskaźnika myszy względem całego dokumentu.
relatedTarget
Brak opisu.
screenX
Zwraca współrzędną x wskaźnika myszy względem ekranu.
screenY
Zwraca współrzędną y wskaźnika myszy względem ekranu.
shiftKey
Informuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz SHIFT na klawiaturze.
wchich
Informuje, który przycisk został naciśnięty.
Zdarzenia związane z obsługą klawiatury
Zdarzenie
Opis
onkeydown
Zdarzenie zachodzi, gdy użytkownik wciska klawisz klawiatury. Działa podobnie jak onkeypress, ale zachodzi nieco wcześniej.
onkeypress
To zdarzenie zachodzi, gdy klawisz klawiatury został wciśnięty.
onkeyup
Zdarzenie to zachodzi podczas zwalniania klawisza.
Obiekty związane ze zdarzeniami KeyboardEvent
W związku z zajściem zdarzenia związanego z obsługą klawiatury możemy odczytywać pewne właściwości, które zostały zestawione w poniższej tablicy. Odczyt tych parametrów odbywa się poprzez obiekt event.
Właściwość
Opis
altKey
Informuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz ALT na klawiaturze.
ctrlKey
Informuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz CTRL na klawiaturze.
charCode
Zwraca kod UNICODE wyspecyfikowanego znaku.
key
Zwraca znak, odpowiadający wciśniętemu klawiszowi na klawiaturze.
keyCode
Zwraca kod UNICODE znaku, odpowiadający wciśniętemu klawiszowi na klawiaturze.
location
Brak opisu.
metaKey
Brak opisu.
shiftKey
Informuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz SHIFT na klawiaturze.
wchich
Brak opisu.
Zdarzenia związane z obiektami i oknami
Zdarzenie
Opis
onabort
Zdarzenie zachodzi, gdy ładowanie zawartości obiektu zostanie przerwane.
onbeforeunload
Brak opisu.
onerror
Zdarzenie zachodzi gdy przeglądarka napotka na błąd podczas ładowania strony lub zewnętrznego pliku.
onhashchange
Zdarzenie zachodzi podczas zmiany zawartości odnośnika po znaku #.
onload
Zdarzenie jest wywoływane, gdy dany obiekt jest wczytany.
onpageshow
Brak opisu.
onpagehide
Brak opisu.
onresize
Zdarzenie zachodzi podczas zmiany rozmiaru obiektu/okna.
onscroll
Zdarzenie to zachodzi podczas przewijania strony.
onunload
To zdarzenie zachodzi jako ostatnia operacja przed zamknięciem obiektu.
Obiekty związane ze zdarzeniem HashChangeEvent
Właściwość
Opis
newURL
Zwraca nowy URL po zmianie.
oldURL
Zwraca stary URL.
Zdarzenia związane z formularzami
Zdarzenie
Opis
onablur
Zdarzenie zachodzi, gdy dane pole formularza przestaje być aktywne.
onchange
Zdarzenie zachodzi, gdy dane pole formularza ulega zmianie.
onfocus
Zdarzenie to zachodzi podczas uaktywnienia danego pola formularza.
onfocusin
Zdarzenie to zachodzi podczas uzyskiwania fokusa (aktywności).
onfocusout
Zdarzenie to zachodzi podczas utraty fokusa (aktywności).
oninput
To zdarzenie zachodzi gdy użytkownik wprowadził dane do pola formularza.
oninvalid
To zdarzenie zachodzi, gdy zawartość elementu formularza jest błędna.
onreset
Zdarzenie zachodzi podczas czyszczenia zawartości formularza.
onsearch
To zdarzenie zachodzi, gdy użytkownik wpisał coś w pole formularza input typu search.
onselect
Zdarzenie to zachodzi po tym jak użytkownik zaznaczył jakiś tekst w polu input lub textarea.
onsubmit
To zdarzenie zachodzi podczas przesyłania formularza.
Zdarzenia związane z przeciąganiem obiektów
Zdarzenie
Opis
ondrag
Zdarzenie zachodzi, gdy dany obiekt jest przeciągany.
ondragend
Zdarzenie zachodzi, gdy użytkownik zakończył przeciąganie obiektu.
ondragenter
Zdarzenie zachodzi, gdy przeciągany element znajduje się w obszarze "dragging" przeciągania.
ondragleave
Brak opisu.
ondragover
Zdarzenie to zachodzi, gdy obiekt znajduje sie nad celem przeciągania.
ondragstart
Zdarzenie zachodzi gdy użytkownik rozpoczął przeciąganie obiektu.
ondrop
Zdarzenie zachodzi, gdy obiekt został upuszczony w obszar celu.
Zdarzenia związane z edycją
Zdarzenie
Opis
oncopy
Zdarzenie zachodzi, gdy użytkownik skopiował obiekt.
oncut
Zdarzenie to zachodzi, gdy użytkownik wyciął obiekt.
onpaste
Zdarzenie zachodzi, gdy użytkownik wstawił obiekt.
Zdarzenia związane z wydrukiem
Zdarzenie
Opis
onafterprint
Zdarzenie zachodzi, gdy użytkownik zakończy proces drukowania.
onbeforeprint
Zdarzenie to zachodzi tuż przed wydrukiem.
Zdarzenia związane z multimediami
Zdarzenie
Opis
onabort
Zdarzenie zachodzi, gdy ładowanie mediów zostaje przerwane.
oncanplay
Zdarzenie to zachodzi przeglądarka może już odtworzyć media (jeżeli wystarczająco dużo zbuforuje).
oncanplaythrough
Zdarzenie to zachodzi, gdy przeglądarka może odtworzyć multimedia bez konieczności zatrzymywania dla buforowania.
ondurationchange
Brak opisu.
onemptied
Brak opisu.
onended
Zdarzenie zachodzi, gdy zakończyło sie odtwarzanie mediów.
onerror
Zdarzenie to zachodzi, gdy wystąpi błąd podczas ładowania mediów.
onloadeddata
Zdarzenie zachodzi, gdy media zostaną załadowane.
onloadedmetadata
Zdarzenie zachodzi, gdy metadane zostaną załadowane.
onloadstart
Brak opisu.
onpause
Zdarzenie zachodzi podczas spauzowania mediów.
onplay
Zdarzenie zachodzi podczas odtworzenia mediów.
onplaying
zdarzenie zachodzi, gdy media są odtwarzane po zatrzymaniu przez proces buforowania lub pauzie.
onprogress
Zdarzenie zachodzi podczas ładowania mediów.
onratechange
Zdarzenie zachodzi podczas zmiany szybkości odtwarzania mediów.
onseeked
Zdarzenie to zachodzi, gdy użytkownik zmienił pozycję głowicy odtwarzania.
onseeking
Zdarzenie to zachodzi, gdy użytkownik zaczyna zmieniać pozycję głowicy odtwarzania.
onstalled
Zdarzenie to zachodzi, gdy przeglądarka nie możne odnaleźć danych źródłowych mediów.
onsuspend
Brak opisu.
ontimeupdate
Zdarzenie to zachodzi, gdy użytkownik zmienia pozycje głowicy odtwarzania.
onvolumechange
Zdarzenie to zachodzi, gdy użytkownik zmieni głośność odtwarzania.
onwaiting
Zdarzenie to zachodzi, gdy przeglądarka pauzuje media w oczekiwaniu na ponowne odtworzenie, na przykład po
Zdarzenia związane z animacją
Zdarzenie
Opis
animationend
Zdarzenie zachodzi, gdy zakończy się animacja CSS.
animationiteration
Zdarzenie zachodzi, gdy animacja jest powtarzana.
animationstart
Zdarzenie to zachodzi podczas wystartowania animacji CSS
Zdarzenia związane z serwerem
Zdarzenie
Opis
onerror
Zdarzenie zachodzi, gdy pojawi sie błąd.
onmessage
Brak opisu.
onopen
Brak opisu.
Zdarzenia różne
Zdarzenie
Opis
onmessage
Zdarzenie zachodzi, gdy obiekt taki jak WebSocket, Web Worker, Event Source lub obiekt dziecko ramki czy okna zwraca informację.
onmousewheel
Zdarzenie zdeprecjonowane. Zobacz onwheel w noiniejszej tabeli.
ononline
Zdarzenie zachodzi, gdy przeglądarka przechodzi do trybu online.
onoffline
Zdarzenie zachodzi, gdy przeglądarka przechodzi do trybu offline.
onpopstate
Brak opisu.
onshow
Zdarzenie zachodzi, gdy obiekt <menu> jest pokazywany jako menu kontekstowe
onstorage
Brak opisu.
ontoggle
Zdarzenie zachodzi, gdy użytkownik otwiera lub zamyka element <details>
onwheel
Zdarzenie zachodzi, gdy przycisk przewijania myszki zmienia swoja pozycję.
Zdarzenia dotykowe
Zdarzenie
Opis
ontouchcancel
Zdarzenie zachodzi, gdy dotyk jest przerwany.
ontouchedend
Zdarzenie zachodzi podczas zabrania palca z ekranu dotykowego.
ontouchmove
Zdarzenie zachodzi, gdy palec przemieszcza sie po ekranie dotykowym.
ontouchstart
Zdarzenie zachodzi, gdy palec dotyka ekranu dotykowego.
Opis tworzenia obiektów w JavaScript. W języku JavaScript możemy tworzyć własne obiekty, przypisywać im właściwości oraz metody. W tym artykule zajmujemy się tym właśnie zagadnieniem.
moduły w JavaScript to obowiązkowy element każdej większej aplikacji. Dzięki nim można utrzymać kod w należytym porządku. Moduły chronią przed błędami, które wynikają z przypadkowego nadpisywania wartości zmiennych.
Jak obsłużyć zdarzenia w JavaScript? W ostatnim artykule zostały omówione zdarzenia predefiniowane w JavaScript, czyli zdarzenia wbudowane w JavaScript. Czas, aby nauczyć się ich używać. Jest kilka sposobów obsługi zdarzeń.
Jak obsłużyć zdarzenia myszy w JavaScript? W momencie naciśnięcia klawisza myszy wyzwalane jest zdarzenie MouseDown, w momencie puszczenia - MouseUp, a jeżeli dla obiektu silnik wykryje jedno zdarzenie Mousedown i MouseUp, wywołane zostanie zdarzenie Click.
