MODUŁ 06

Obsługa zdarzeń i interakcja użytkownika

PPrezentacja dla nauczyciela

W tym module nauczysz się reagować na akcje użytkownika na stronie: poznasz dwa sposoby rejestrowania zdarzeń (przez atrybut onclick w HTML oraz metodę addEventListener) i dowiesz się, jak aktualizować interfejs na żywo przy zmianie kontrolek formularza.

Podpinanie zdarzenia przez atrybut onclick w HTML

Zdarzenie (event) to sygnał informujący przeglądarkę, że zaszła określona akcja użytkownika — na przykład kliknięcie przycisku, naciśnięcie klawisza lub zmiana zaznaczenia pola wyboru.

Najprostszą i powszechnie stosowaną metodą powiązania elementu strony z kodem JavaScript jest użycie atrybutu zdarzenia bezpośrednio w znaczniku HTML. Dla kliknięcia myszą służy atrybut onclick:

<button onclick="zareagujNaKlikniecie()">Oblicz</button>

Wartość atrybutu onclick to instrukcja wywołania funkcji (wraz z nawiasami okrągłymi). Sama definicja funkcji znajduje się w dołączonym zewnętrznym pliku skrypt.js:

function zareagujNaKlikniecie() {
    // kod wykonywany po kliknięciu przycisku
}

Wielką zaletą tego zapisu jest możliwość bezpośredniego przekazywania stałych argumentów z poziomu HTML. Jeżeli mamy kilka przycisków wybierających warianty (np. kolory lub stawki), każdy przycisk może przekazać własną wartość do tej samej funkcji: onclick="ustawKolor('#b91c1c', 'Czerwony')".

W poniższym przykładzie trzy przyciski wywołują funkcję ustawKolor(), dynamicznie zmieniając obramowanie i komunikat w ramce podglądu. Przetestuj działanie przycisków:

function ustawKolor(kodHex, nazwaKoloru) {
    const ramka = document.getElementById("ramkaPodgladu");
    ramka.style.borderColor = kodHex;
    ramka.style.color = kodHex;
    ramka.textContent = "Wybrano kolor: " + nazwaKoloru;
}

1. W jaki sposób poprawnie wywołać funkcję oblicz z poziomu atrybutu onclick w znaczniku HTML?

Zapisując instrukcję wywołania z nawiasami w postaci oblicz z nawiasem Podając wyłącznie nazwę samej funkcji bez używania nawiasów okrągłych Wpisując ścieżkę do pliku skryptu poprzedzoną symbolem ukośnika Używając słowa kluczowego call z parametrem będącym nazwą funkcji

2. Jaka jest główna zaleta przekazywania argumentów wewnątrz atrybutu onclick w kodzie HTML?

Zwiększa to prędkość kompilacji kodu JavaScript w silniku V8 przeglądarki Pozwala wielu różnym przyciskom wywoływać tę samą funkcję z innymi danymi Automatycznie tworzy kopię zapasową pliku skryptu w pamięci lokalnej serwera Blokuje możliwość inspekcji kodu źródłowego w narzędziach deweloperskich

3. Gdzie powinna znajdować się treść funkcji wywoływanej przez atrybut onclick przycisku?

Wewnątrz arkusza stylów CSS w regule przypisanej do klasy tego przycisku W nagłówku dokumentu wewnątrz znacznika meta odpowiedzialnego za skrypty W dołączonym zewnętrznym pliku skryptu z rozszerzeniem js lub w bloku script Wyłącznie w bazie danych serwera udostępniającego stronę internetową

Rejestracja zdarzeń przez metodę addEventListener

Drugim standardowym sposobem obsługi interakcji jest rejestracja tzw. nasłuchiwacza zdarzeń (event listener) w całości po stronie kodu JavaScript, z zachowaniem czystego kodu HTML bez dodatkowych atrybutów.

Służy do tego metoda addEventListener() wywoływana na pobranym obiekcie elementu DOM:

const przycisk = document.getElementById("mojPrzycisk");
przycisk.addEventListener("click", zareagujNaKlikniecie);

Metoda przyjmuje dwa podstawowe argumenty:

Nazwa zdarzenia: jako łańcuch znaków bez przedrostka „on” — czyli piszemy "click", a nie "onclick".
Funkcja obsługująca (callback): nazwa funkcji przekazana jako referencja — bez nawiasów okrągłych. Zapisanie nawiasów zareagujNaKlikniecie() spowodowałoby natychmiastowe uruchomienie funkcji w momencie wczytywania skryptu, a nie po kliknięciu!

Zaletą addEventListener() jest możliwość przypisania wielu niezależnych funkcji do tego samego zdarzenia na jednym elemencie oraz całkowite odseparowanie struktury HTML od logiki programistycznej.

W poniższym przykładzie rejestrujemy nasłuchiwacz kliknięcia za pomocą addEventListener(), który zlicza naciśnięcia przycisku. Kliknij przycisk i zaobserwuj wzrost licznika:

let licznik = 0;

function zwiekszLicznik() {
    licznik += 1;
    const wynik = document.getElementById("licznikKlikniec");
    wynik.textContent = "Liczba kliknięć: " + licznik;
}

const przycisk = document.getElementById("przyciskLicznika");
przycisk.addEventListener("click", zwiekszLicznik);

4. Jaką nazwę zdarzenia kliknięcia należy podać jako pierwszy argument metody addEventListener?

Nazwę zdarzenia z przedrostkiem on, czyli łańcuch znaków onclick Dowolną nazwę zdefiniowaną wcześniej w arkuszu stylów CSS dokumentu Ścieżkę do funkcji obsługującej zapisaną w pliku zewnętrznym skryptu Czystą nazwę zdarzenia bez przedrostka on, czyli łańcuch znaków click

5. W jaki sposób przekazuje się funkcję obsługującą jako drugi argument metody addEventListener?

Podając samą referencję do nazwy funkcji bez nawiasów okrągłych Wywołując funkcję z nawiasami okrągłymi bezpośrednio w argumencie Wpisując pełny kod źródłowy funkcji w cudzysłowie pojedynczym Używając instrukcji return przed właściwą nazwą danej funkcji

6. Która cecha stanowi istotną przewagę metody addEventListener nad atrybutami zdarzeń w HTML?

Pozwala na uruchamianie kodu bez konieczności włączania JavaScriptu Umożliwia przypisanie wielu niezależnych funkcji do jednego zdarzenia Automatycznie naprawia wszelkie błędy składniowe w ciele danej funkcji Wymusza na przeglądarce natychmiastowe odświeżenie całego dokumentu

Zdarzenia kontrolek formularza: change i input

Oprócz kliknięć myszą (click) w aplikacjach internetowych kluczowe znaczenie ma obsługa zdarzeń generowanych przez kontrolki formularzy:

change — odpala się w momencie, gdy wartość kontrolki ulegnie zmianie i zmiana ta zostanie zatwierdzona. W przypadku list rozwijanych <select> oraz pól wyboru (checkbox, radio) zdarzenie zachodzi natychmiast po zmianie wyboru. W przypadku pól tekstowych zdarzenie change odpala się dopiero wtedy, gdy użytkownik zakończy wpisywanie i opuści pole (straci ono tzw. focus).
input — odpala się natychmiast przy każdej pojedynczej modyfikacji wartości. Jest to idealne zdarzenie do obsługi suwaków zakresu (<input type="range">) oraz pól wyszukiwania, gdzie chcemy dynamicznie aktualizować widok w czasie rzeczywistym podczas pisania lub przeciągania suwaka.
blur — odpala się w chwili, gdy kontrolka traci focus (kursor opuszcza pole), co często wykorzystuje się do walidacji pojedynczego pola lub aktualizacji paska postępu.

Suwak budżetu reaguje na zdarzenie input i na bieżąco wyświetla aktualną kwotę.

Przesuń suwak w edytorze i zaobserwuj natychmiastową reakcję:

function aktualizujBudzet() {
    const suwak = document.getElementById("suwakBudzetu");
    const wyswietlacz = document.getElementById("wyswietlacz");
    wyswietlacz.textContent = suwak.value + " zł";
}

const suwak = document.getElementById("suwakBudzetu");
suwak.addEventListener("input", aktualizujBudzet);

7. Kiedy w kontrolce typu suwak range wywoływane jest zdarzenie o nazwie input?

Wyłącznie w chwili kliknięcia prawym przyciskiem myszy na suwaku Dopiero po zwolnieniu przycisku myszy i opuszczeniu obszaru kontrolki Natychmiast przy każdej zmianie pozycji suwaka w czasie rzeczywistym Tylko w momencie załadowania strony przez silnik przeglądarki

8. W którym momencie pole tekstowe input odpala zdarzenie o nazwie change?

Przy każdym pojedynczym naciśnięciu dowolnego klawisza alfanumerycznego Podczas zaznaczania fragmentu tekstu za pomocą lewego przycisku myszy W chwili otwarcia okna przeglądarki przed wczytaniem arkuszy stylów CSS Po zakończeniu edycji i utracie fokusu przez daną kontrolkę formularza

9. Które zdarzenie formularza jest wyzwalane w chwili, gdy kontrolka traci aktywny fokus?

Zdarzenie blur informujące o opuszczeniu pola przez kursor użytkownika Zdarzenie focus sygnalizujące rozpoczęcie edycji przez użytkownika Zdarzenie submit związane z wysłaniem gotowych danych na serwer Zdarzenie reset przywracające początkowe wartości w kontrolkach

Obsługa zdarzeń i interakcja użytkownika

Podpinanie zdarzenia przez atrybut onclick w HTML

Rejestracja zdarzeń przez metodę addEventListener

Zdarzenia kontrolek formularza: change i input

Ćwiczenia