1

Temat: Obsługa zdarzeń

Obsługa zdarzeń w JavaScript
Zdarzenia to czynności, które użytkownik wykonuje podczas odwiedzania naszej strony, np.
kliknięcie na danym elemencie strony, naciśnięcie klawisza, najechanie kursorem na element.
Javascript udostępnia kilkanaście typów zdarzeń, dzięki którym jesteśmy panować nad tym,
co się dzieje na stronie:

onAbort występuje, gdy zaniechano ładowania strony
onBlur występuje, gdy obiekt przestał być aktywny
onDblClick występuje, gdy podwójnie klikniemy na obiekt
onChange występuje, gdy obiekt zmienił swoją zawartość
onClick występuje, gdy obiekt został kliknięty
onError występuje, gdy wystąpił błąd w skrypcie
onFocus występuje, gdy obiekt stał się aktywny (został wybrany)
onKeyDown występuje naciśnięcia klawisza na klawiaturze
onKeyUp wyetępuje gdy puścimy klawisz na klawiaturze
onLoad występuje, gdy obiekt został załadowany
onMouseOver występuje, gdy kursor znalazł się na obiekcie
onMouseOut występuje, gdy kursor opuścił obiekt
onSelect występuje, gdy zawartość obiektu została zaznaczona
onSubmit występuje, gdy formularz został wysłany
onUnload występuje, gdy zmieniono wyświetlaną stronę

Aby zdarzenie było dostępne dla danego obiektu, musimy je dla niego zarejestrować. Istnieje
kilka metod na rejestrację zdarzenia dla obiektu.

1. Rejestrowanie zdarzenia online - dodanie atrybutu w znaczniku HTML wg schematu
nazwa_zdarzenia=”funkcja()”, np.:
<p onmousemove="podswietlenie()">Akapit</p>
<input type="button" onclick="przycisk()">

2. Rejestrowanie zdarzenia w kodzie JavaScript, np:
element.onmousemove = podświetlenie;
element2.onclick = function () {
alert("Kliknięto element 2.");
}

Funkcje dostępu do elementów HTML w JavaScript
document.getElementById("id") - wyszukuje element o identyfikatorze id
document.getElementsByTagName("znacznik") – wyszukuje wszystkie
elementy o nazwie znacznik
element.firstChild.nodeValue – zawartość elementu (np.dla <p>tekst</p> zwróci
wartość tekst).
element.style.className – nazwa klasy CSS przypisanej do elementu
element.style.atrybutCSS – atrybut CSS przypisany do elementu
np.: element.style.color = "blue”; element.style.backgroundColor = "yellow";