JavaScript w przeglądarce · Moduł 06

Obsługa zdarzeń i interakcja użytkownika

Wywoływanie funkcji przez onclick w HTML, rejestracja addEventListener oraz obsługa zdarzeń formularza change i input.

45 min
16 slajdów
Notatki nauczyciela: N
Strona modułu: otwórz

Plan · 45 min

Co dziś robimy

12 minPodpinanie zdarzenia przez atrybut onclick w HTML Najprostszą i powszechnie stosowaną metodą powiązania elementu strony z kodem JavaScript…
12 minRejestracja zdarzeń przez metodę addEventListener Nazwa zdarzenia: jako łańcuch znaków bez przedrostka „on” — czyli piszemy "click" , a nie…
12 minZdarzenia kontrolek formularza: change i input change — odpala się w momencie, gdy wartość kontrolki ulegnie zmianie i zmiana ta…
4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
5 minPodsumowanie bilet wyjściowy i zadanie domowe

Atom 1 z 3 · ~12 min

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

Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

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

Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

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

Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

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

Atom 2 z 3 · ~12 min

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.

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…
Służy do tego metoda addEventListener() wywoływana na pobranym obiekcie elementu DOM:
Zaletą addEventListener() jest możliwość przypisania wielu niezależnych funkcji do tego samego zdarzenia na jednym elemencie oraz całkowite odseparowanie struktury HTML…

Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

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

Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

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

Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

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

Atom 3 z 3 · ~12 min

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.
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…
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ę.

Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

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

Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

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

Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

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

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

Najprostszą i powszechnie stosowaną metodą powiązania elementu strony z kodem JavaScript jest użycie atrybutu zdarzenia bezpośrednio w znaczniku HTML.
Nazwa zdarzenia: jako łańcuch znaków bez przedrostka „on” — czyli piszemy "click" , a nie "onclick" .
change — odpala się w momencie, gdy wartość kontrolki ulegnie zmianie i zmiana ta zostanie zatwierdzona.

Bilet wyjściowy: Które zdarzenie formularza jest wyzwalane w chwili, gdy kontrolka traci aktywny fokus?
Odpowiedź: a) Zdarzenie blur informujące o opuszczeniu pola przez kursor użytkownika