Zdarzenia w JavaScript
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ć.
Spis treści
- Zdarzenia związane z obsługą myszy
- Zdarzenia związane z obsługą klawiatury
- Zdarzenia związane z obiektami i oknami
- Zdarzenia związane z formularzami
- Zdarzenia związane z przeciąganiem obiektów (Drag&Drop)
- Zdarzenia związane z edycją
- Zdarzenia związane z wydrukiem
- Zdarzenia związane z multimediami
- Zdarzenia związane z animacją CSS
- Zdarzenia związane z serwerem
- Zdarzenia różne
- Zdarzenia związane obsługa ekranów dotykowych
- Obsługa zdarzeń
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. |
Inne zagadnienia z tej lekcji
Obiekty w JavaScript© medianauka.pl, 2016-11-20, A-3295