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

 

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

ZdarzenieOpis
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
altKeyInformuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz ALT na klawiaturze.
buttonInformuje, 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).
buttonsZwraca numer, który identyfikuje wciśnięty klawisz myszy.
clientXZwraca współrzędną x wskaźnika myszy względem danego okna.
clientYZwraca współrzędną y wskaźnika myszy względem danego okna.
ctrlKeyInformuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz CTRL na klawiaturze.
detailInformuje ile razy klawisz myszy był naciśnięty.
metaKeyBrak opisu.
pageXZwraca współrzędną x wskaźnika myszy względem całego dokumentu.
pageYZwraca współrzędną y wskaźnika myszy względem całego dokumentu.
relatedTargetBrak opisu.
screenXZwraca współrzędną x wskaźnika myszy względem ekranu.
screenYZwraca współrzędną y wskaźnika myszy względem ekranu.
shiftKeyInformuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz SHIFT na klawiaturze.
wchichInformuje, który przycisk został naciśnięty.

Zdarzenia związane z obsługą klawiatury

ZdarzenieOpis
onkeydownZdarzenie zachodzi, gdy użytkownik wciska klawisz klawiatury. Działa podobnie jak onkeypress, ale zachodzi nieco wcześniej.
onkeypressTo zdarzenie zachodzi, gdy klawisz klawiatury został wciśnięty.
onkeyupZdarzenie 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
altKeyInformuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz ALT na klawiaturze.
ctrlKeyInformuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz CTRL na klawiaturze.
charCodeZwraca kod UNICODE wyspecyfikowanego znaku.
keyZwraca znak, odpowiadający wciśniętemu klawiszowi na klawiaturze.
keyCodeZwraca kod UNICODE znaku, odpowiadający wciśniętemu klawiszowi na klawiaturze.
locationBrak opisu.
metaKeyBrak opisu.
shiftKeyInformuje, czy podczas zdarzenia kliknięcia wciśnięty jest klawisz SHIFT na klawiaturze.
wchichBrak opisu.

Zdarzenia związane z obiektami i oknami

ZdarzenieOpis
onabortZdarzenie zachodzi, gdy ładowanie zawartości obiektu zostanie przerwane.
onbeforeunloadBrak opisu.
onerrorZdarzenie zachodzi gdy przeglądarka napotka na błąd podczas ładowania strony lub zewnętrznego pliku.
onhashchangeZdarzenie zachodzi podczas zmiany zawartości odnośnika po znaku #.
onloadZdarzenie jest wywoływane, gdy dany obiekt jest wczytany.
onpageshowBrak opisu.
onpagehideBrak opisu.
onresizeZdarzenie zachodzi podczas zmiany rozmiaru obiektu/okna.
onscrollZdarzenie to zachodzi podczas przewijania strony.
onunloadTo zdarzenie zachodzi jako ostatnia operacja przed zamknięciem obiektu.

Obiekty związane ze zdarzeniem HashChangeEvent

WłaściwośćOpis
newURLZwraca nowy URL po zmianie.
oldURLZwraca stary URL.

Zdarzenia związane z formularzami

ZdarzenieOpis
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

ZdarzenieOpis
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ą

ZdarzenieOpis
oncopyZdarzenie zachodzi, gdy użytkownik skopiował obiekt.
oncutZdarzenie to zachodzi, gdy użytkownik wyciął obiekt.
onpasteZdarzenie zachodzi, gdy użytkownik wstawił obiekt.

Zdarzenia związane z wydrukiem

ZdarzenieOpis
onafterprintZdarzenie zachodzi, gdy użytkownik zakończy proces drukowania.
onbeforeprintZdarzenie to zachodzi tuż przed wydrukiem.

Zdarzenia związane z multimediami

ZdarzenieOpis
onabortZdarzenie zachodzi, gdy ładowanie mediów zostaje przerwane.
oncanplayZdarzenie to zachodzi przeglądarka może już odtworzyć media (jeżeli wystarczająco dużo zbuforuje).
oncanplaythroughZdarzenie to zachodzi, gdy przeglądarka może odtworzyć multimedia bez konieczności zatrzymywania dla buforowania.
ondurationchangeBrak opisu.
onemptiedBrak opisu.
onendedZdarzenie zachodzi, gdy zakończyło sie odtwarzanie mediów.
onerrorZdarzenie to zachodzi, gdy wystąpi błąd podczas ładowania mediów.
onloadeddataZdarzenie zachodzi, gdy media zostaną załadowane.
onloadedmetadataZdarzenie zachodzi, gdy metadane zostaną załadowane.
onloadstartBrak opisu.
onpauseZdarzenie zachodzi podczas spauzowania mediów.
onplayZdarzenie zachodzi podczas odtworzenia mediów.
onplayingzdarzenie zachodzi, gdy media są odtwarzane po zatrzymaniu przez proces buforowania lub pauzie.
onprogressZdarzenie zachodzi podczas ładowania mediów.
onratechangeZdarzenie zachodzi podczas zmiany szybkości odtwarzania mediów.
onseekedZdarzenie to zachodzi, gdy użytkownik zmienił pozycję głowicy odtwarzania.
onseekingZdarzenie to zachodzi, gdy użytkownik zaczyna zmieniać pozycję głowicy odtwarzania.
onstalledZdarzenie to zachodzi, gdy przeglądarka nie możne odnaleźć danych źródłowych mediów.
onsuspendBrak opisu.
ontimeupdateZdarzenie to zachodzi, gdy użytkownik zmienia pozycje głowicy odtwarzania.
onvolumechangeZdarzenie to zachodzi, gdy użytkownik zmieni głośność odtwarzania.
onwaitingZdarzenie to zachodzi, gdy przeglądarka pauzuje media w oczekiwaniu na ponowne odtworzenie, na przykład po

Zdarzenia związane z animacją

ZdarzenieOpis
animationendZdarzenie zachodzi, gdy zakończy się animacja CSS.
animationiterationZdarzenie zachodzi, gdy animacja jest powtarzana.
animationstartZdarzenie to zachodzi podczas wystartowania animacji CSS

Zdarzenia związane z serwerem

ZdarzenieOpis
onerrorZdarzenie zachodzi, gdy pojawi sie błąd.
onmessageBrak opisu.
onopenBrak opisu.

Zdarzenia różne

ZdarzenieOpis
onmessageZdarzenie zachodzi, gdy obiekt taki jak WebSocket, Web Worker, Event Source lub obiekt dziecko ramki czy okna zwraca informację.
onmousewheelZdarzenie zdeprecjonowane. Zobacz onwheel w noiniejszej tabeli.
ononlineZdarzenie zachodzi, gdy przeglądarka przechodzi do trybu online.
onofflineZdarzenie zachodzi, gdy przeglądarka przechodzi do trybu offline.
onpopstateBrak opisu.
onshowZdarzenie zachodzi, gdy obiekt <menu> jest pokazywany jako menu kontekstowe
onstorageBrak opisu.
ontoggleZdarzenie zachodzi, gdy użytkownik otwiera lub zamyka element <details>
onwheelZdarzenie zachodzi, gdy przycisk przewijania myszki zmienia swoja pozycję.

Zdarzenia dotykowe

ZdarzenieOpis
ontouchcancelZdarzenie zachodzi, gdy dotyk jest przerwany.
ontouchedendZdarzenie zachodzi podczas zabrania palca z ekranu dotykowego.
ontouchmoveZdarzenie zachodzi, gdy palec przemieszcza sie po ekranie dotykowym.
ontouchstartZdarzenie zachodzi, gdy palec dotyka ekranu dotykowego.



Inne zagadnienia z tej lekcji

Obiekty w JavaScript


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


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.

Obsługa zdarzeń w JavaScript


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ń.

Obsługa myszy w JavaScript


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.




© medianauka.pl, 2016-11-20, A-3295



©® Media Nauka 2008-2023 r.