rrogacz.pl
ikony programów
JavaScript zdarzenia

w tym dziale:

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 tym dziale:

Zdarzenia - dokument PDF

 

W poniższych tablicach wymieniono zdarzenia z podziałem na kategorie.

Zdarzenia związane z obsługą myszy

ZdarzenieOpis
onclickZdarzenie zachodzi, gdy kliknięto na obiekcie.
oncontextmenuZdarzenie zachodzi dla kliknięcia prawym przyciskiem myszy dla wywołania menu kontekstowego.
ondblclickZdarzenie zachodzi, gdy kliknięto dwukrotnie na obiekcie.
onwheelZdarzenie zachodzi, gdy kółko myszy obracane jest na obiekcie lub gdy użytkownik przewija za pomocą touchpada.
onmousedownTo zdarzenie zachodzi, gdy kliknięto przed zwolnieniem klawisza (przydatne podczas przenoszenia elementów na stronie - moment wskazania obiektu do przeniesienia).
onmouseenterZdarzenie zachodzi, gdy wskaźnik myszy najedzie na obrazek.
onmouseleaveZdarzenie zachodzi, gdy wskaźnik myszy opuszcza obszar obrazka.
onmousemoveZdarzenie jest wyzwalane przy jakimkolwiek ruchu myszką.
onmouseoverZdarzenie zachodzi, gdy wskaźnik myszy znajdzie się nad obiektem.
onmouseoutZdarzenie zachodzi, gdy wskaźnik myszy opuścił obiekt.
onmouseupZwolnienie 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,
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.
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.
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.

Zdarzenia dotykowe

ZdarzenieOpis
touchstartWywoływane, gdy palec dotknie ekranu (lub gdy użytkownik zaczyna interakcję za pomocą myszy/wskaźnika).

Przykład użycia:

document.getElementById('mojElement').addEventListener('touchstart', function(e) {
  console.log('Zaczęto dotykać!');
  // console.log(e.touches); // Dostęp do informacji o dotknięciach
});
touchmoveWystępuje podczas przesuwania palca po ekranie.

Przykład użycia:

document.getElementById('mojElement').addEventListener('touchmove', function(e) {
  console.log('Przesuwanie palca...');
});
touchendUruchamiane po uniesieniu palca z ekranu.

Przykład użycia:

document.getElementById('mojElement').addEventListener('touchend', function(e) {
  console.log('Zakończono dotykanie!');
});
touchcancelWystępuje, gdy dotyk jest przerwany (np. przez system operacyjny).
Kluczowe właściwości obiektu TouchEvent
Podczas obsługi zdarzenia masz dostęp do list punktów dotyku:
touchesLista wszystkich punktów dotyku obecnie znajdujących się na ekranie.
targetTouchesPunkty dotyku znajdujące się wewnątrz elementu, który wywołał zdarzenie.
changedTouchesPunkty dotyku, które zmieniły się od ostatniego zdarzenia (np. palec, który właśnie został podniesiony).
Każdy punkt dotyku (obiekt Touch) zawiera współrzędne:
clientX/clientY Pozycja względem okna przeglądarki (viewport).
pageX/pageY Pozycja względem całego dokumentu (uwzględnia przewijanie).

Przykład użycia JavaScript:

const box = document.getElementById('myBox');

box.addEventListener('touchstart', (e) => {
    console.log('Dotknięto w punkcie:', e.touches[0].clientX);
});

box.addEventListener('touchmove', (e) => {
    // Zapobiega domyślnemu przewijaniu strony podczas ruchu
    e.preventDefault(); 
    let touch = e.touches[0];
    console.log(`Ruch: X=${touch.clientX}, Y=${touch.clientY}`);
}, { passive: false });
Zdarzenia uniwersalne (Pointer Events) - łączą zdarzenia dotykowe, myszy i pióra.
pointerdownOdpowiednik touchstart/mousedown
pointermoveOdpowiednik touchmove/mousemove
pointerupOdpowiednik touchend/mouseup

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.



Zdarzenia związane z obiektami i oknami

ZdarzenieOpis
onloadZdarzenie jest wywoływane, gdy dany obiekt jest wczytany.
onresizeZdarzenie zachodzi podczas zmiany rozmiaru obiektu/okna.
onscrollZdarzenie to zachodzi podczas przewijania strony.
onunloadTo zdarzenie zachodzi jako ostatnia operacja przed zamknięciem obiektu.



Zdarzenia związane z formularzami

ZdarzenieOpis
onablurZdarzenie zachodzi, gdy dane pole formularza przestaje być aktywne.
onfocusZdarzenie to zachodzi podczas uaktywnienia danego pola formularza.
onchangeZdarzenie zachodzi, gdy dane pole formularza ulega zmianie.
Funkcja wywoływana jest po opuszczeniu pola.
oninputZdarzenie zachodzi, gdy dane pole formularza ulega zmianie.
Funkcja wywoływana jest w momencie zmiany.
onresetZdarzenie zachodzi podczas czyszczenia zawartości formularza.
onselectZdarzenie to zachodzi po tym jak użytkownik zaznaczył jakiś tekst w polu input lub textarea.
onsubmitTo zdarzenie zachodzi podczas przesyłania formularza.



Projekt i wykonanie: Ryszard Rogacz© 1999−2026