JavaScript Events – Sekret Interaktywności Twojej Strony!

JavaScript to potężne narzędzie do tworzenia dynamicznych stron internetowych, a jego największą zaletą jest obsługa zdarzeń (events). Dzięki nim możemy reagować na kliknięcia użytkowników, ruchy myszką, naciśnięcia klawiszy i wiele innych działań. W tym artykule zgłębimy tajniki "JavaScript events" i pokażemy konkretne przykłady ich użycia.

1. Czym są JavaScript events?

Zdarzenia w JavaScript to sygnały wysyłane przez przeglądarkę w odpowiedzi na interakcje użytkownika lub inne zmiany na stronie. Może to być kliknięcie przycisku, najechanie myszką na element, przewinięcie strony czy naciśnięcie klawisza.

2. Obsługa zdarzeń w JavaScript

JavaScript pozwala na obsługę zdarzeń na kilka sposobów:

• Bezpośrednio w atrybucie HTML
• Za pomocą właściwości elementu w JavaScript
• Za pomocą addEventListener()

3. Dodawanie zdarzeń w HTML

Najprostszy sposób to dodanie obsługi zdarzenia bezpośrednio w HTML:

Kliknij mnie

Jest to jednak przestarzała metoda i zaleca się korzystanie z JavaScript do obsługi zdarzeń.

4. Obsługa zdarzeń w JavaScript

Lepszym podejściem jest przypisanie funkcji do właściwości zdarzenia:

document.getElementById("myButton").onclick = function() {
    alert("Przycisk został kliknięty!");
};

5. Wykorzystanie addEventListener()

Najbardziej elastyczna metoda to użycie addEventListener(), które pozwala na dodanie wielu nasłuchiwaczy do jednego elementu.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Przycisk kliknięty z addEventListener!");
});

6. JavaScript Events – Przykłady

Obsługa zdarzenia "mouseover"

Poniższy kod zmienia kolor tła przy najechaniu myszką na element.

document.getElementById("box").addEventListener("mouseover", function() {
    this.style.backgroundColor = "lightblue";
});

Obsługa zdarzenia "keydown" (naciśnięcie klawisza)

Przykład, który wykrywa wciśnięty klawisz i wyświetla jego kod.

document.addEventListener("keydown", function(event) {
    console.log("Wciśnięto klawisz: " + event.key);
});

Obsługa zdarzenia "submit" w formularzu

Zapobiegamy domyślnemu wysłaniu formularza i sprawdzamy poprawność danych.

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    alert("Formularz został wysłany!");
});

7. Delegowanie zdarzeń

Jeśli mamy dynamicznie dodawane elementy, możemy wykorzystać delegowanie zdarzeń:

document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target.classList.contains("child")) {
        alert("Kliknięto dziecko!");
    }
});

8. Podsumowanie

Zdarzenia JavaScript to klucz do interaktywnych stron internetowych. Dzięki nim możemy dynamicznie reagować na działania użytkowników i tworzyć bogate doświadczenia. Mamy nadzieję, że nasze przykłady pomogły Ci lepiej zrozumieć "JavaScript events"!