Logo Serwisu Media Nauka


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

ZdarzenieOpis
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

ZdarzenieOpis
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

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

ZdarzenieOpis
onafterprint Zdarzenie zachodzi, gdy użytkownik zakończy proces drukowania.
onbeforeprint Zdarzenie to zachodzi tuż przed wydrukiem.

Zdarzenia związane z multimediami

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

ZdarzenieOpis
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

ZdarzenieOpis
onerror Zdarzenie zachodzi, gdy pojawi sie błąd.
onmessage Brak opisu.
onopen Brak opisu.

Zdarzenia różne

ZdarzenieOpis
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

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


© Media Nauka, 2016-11-20, ART-3295






Polecamy