Obsługa zdarzeń

Obsługa zdarzeń w JavaScript jest kluczowym elementem interaktywnych stron internetowych. Umożliwia reagowanie na działania użytkownika, takie jak kliknięcia myszą, naciśnięcia klawiszy, przewijanie strony, ładowanie dokumentu i wiele innych. JavaScript oferuje wiele sposobów na obsługę zdarzeń, od prostego przypisania zdarzeń bezpośrednio w HTML, przez metody element.addEventListener() i element.removeEventListener(), po obsługę zdarzeń na poziomie okna (window). W tej lekcji przyjrzymy się różnym przypadkom użycia zdarzeń w window, ilustrując ich obsługę na prostych przykładach.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Obsługa zdarzeń w JavaScript</title>
</head>
<body>
    <h3>Przykłady obsługi zdarzeń w JavaScript</h3>
    <button id="clickButton">Kliknij mnie</button>

    <script>
        // Przykład 1: Obsługa kliknięcia przycisku
        const button = document.getElementById('clickButton');
        button.addEventListener('click', function() {
            alert('Kliknięto przycisk!');
        });
        // W tym przykładzie pokazujemy, jak obsłużyć kliknięcie przycisku.
        // Używamy metody addEventListener, aby zarejestrować funkcję callback,
        // która zostanie wykonana po kliknięciu przycisku.

        // Przykład 2: Obsługa zdarzenia załadowania strony
        window.addEventListener('load', function() {
            console.log('Strona została załadowana.');
        });
        // Ten przykład pokazuje, jak wykryć moment załadowania całej strony.
        // Zdarzenie 'load' jest wyzwalane, gdy cała zawartość strony (łącznie z
        // zasobami, takimi jak obrazy) została załadowana.

        // Przykład 3: Obsługa zdarzenia zmiany rozmiaru okna
        window.addEventListener('resize', function() {
            console.log('Zmieniono rozmiar okna.');
        });
        // Tutaj pokazujemy, jak obsłużyć zmianę rozmiaru okna przeglądarki.
        // Może to być przydatne do dostosowania układu strony do nowych wymiarów.

        // Przykład 4: Obsługa zdarzenia przewijania strony
        window.addEventListener('scroll', function() {
            console.log('Strona jest przewijana.');
        });
        // Ten przykład ilustruje, jak wykryć przewijanie strony przez użytkownika.
        // Może to być użyteczne, np. do pokazania lub ukrycia elementów w zależności
        // od tego, jak daleko strona została przewinięta.
    </script>
</body>
</html>

Podsumowanie

Obsługa zdarzeń w JavaScript jest fundamentem tworzenia interaktywnych i responsywnych stron internetowych. Poprzez reagowanie na akcje użytkownika, można stworzyć bardziej angażujące i dynamiczne interfejsy. Wykorzystanie zdarzeń na poziomie okna pozwala na obsługę globalnych zdarzeń, takich jak załadowanie strony, zmiana jej rozmiaru czy przewijanie, co jest szczególnie przydatne w projektowaniu responsywnych i interaktywnych aplikacji webowych. Przedstawione przykłady pokazują podstawowe techniki obsługi zdarzeń, stanowiąc fundament do dalszego eksplorowania i rozwijania zaawansowanych technik JavaScript.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top