46. Obsługa zdarzeń

Wprowadzenie do obsługi zdarzeń

Obsługa zdarzeń (ang. *event handling*) to kluczowy mechanizm w JavaScript, który umożliwia reagowanie na interakcje użytkownika z stroną internetową. Dzięki zdarzeniom można wykonywać kod w odpowiedzi na różne działania, takie jak kliknięcia, przesuwanie myszy, naciskanie klawiszy czy ładowanie strony.

Wskazówka dla PhpStorm: Możesz użyć skrótu Alt + Insert, aby szybko dodać obsługę zdarzenia w kodzie JavaScript.
Podstawowe sposoby obsługi zdarzeń

W JavaScript istnieje kilka sposobów na obsługę zdarzeń. Oto najważniejsze z nich:

  • Atrybuty zdarzeń w HTML: Prosty, ale mniej elastyczny sposób.
  • Właściwości zdarzeń w JavaScript: Przypisanie funkcji do właściwości zdarzenia.
  • Metoda addEventListener: Najbardziej elastyczny i zalecany sposób.
1. Atrybuty zdarzeń w HTML
<button onclick="alert('Przycisk został kliknięty!')">Kliknij mnie</button>
2. Właściwości zdarzeń w JavaScript
const przycisk = document.querySelector("button");
przycisk.onclick = function() {
  alert("Przycisk został kliknięty!");
};
3. Metoda addEventListener
const przycisk = document.querySelector("button");
przycisk.addEventListener("click", () => {
  alert("Przycisk został kliknięty!");
});
Metoda addEventListener

Metoda addEventListener jest najbardziej elastycznym sposobem obsługi zdarzeń. Pozwala na dodanie wielu funkcji obsługi do jednego zdarzenia oraz daje większą kontrolę nad zdarzeniami.

Składnia
element.addEventListener(zdarzenie, funkcja, opcje);
Przykład: Dodawanie wielu funkcji obsługi
const przycisk = document.querySelector("button");

przycisk.addEventListener("click", () => {
  console.log("Pierwsza funkcja obsługi");
});

przycisk.addEventListener("click", () => {
  console.log("Druga funkcja obsługi");
});
Usuwanie funkcji obsługi
function mojaFunkcja() {
  console.log("Zdarzenie obsłużone");
}

przycisk.addEventListener("click", mojaFunkcja);
przycisk.removeEventListener("click", mojaFunkcja);
Obiekt zdarzenia

Podczas obsługi zdarzeń, funkcja obsługi (ang. *event handler*) otrzymuje obiekt zdarzenia (ang. *event object*), który zawiera informacje o zdarzeniu. Obiekt ten ma wiele przydatnych właściwości i metod.

Przykład: Wykorzystanie obiektu zdarzenia
document.addEventListener("click", (e) => {
  console.log(`Typ zdarzenia: ${e.type}`);
  console.log(`Element docelowy: ${e.target.tagName}`);
});
Najważniejsze właściwości obiektu zdarzenia
  • type – typ zdarzenia (np. "click").
  • target – element, na którym nastąpiło zdarzenie.
  • currentTarget – element, na którym zarejestrowano funkcję obsługi.
  • clientX, clientY – pozycja kursora myszy względem okna przeglądarki.
Zapobieganie domyślnym działaniom

Czasami chcemy zapobiec domyślnemu zachowaniu przeglądarki, np. przeładowaniu strony po kliknięciu linku. Możemy to zrobić za pomocą metody preventDefault() obiektu zdarzenia.

Przykład: Zapobieganie domyślnemu działaniu
document.querySelector("a").addEventListener("click", (e) => {
  e.preventDefault();
  alert("Przejście do linku zostało zablokowane!");
});
Propagacja zdarzeń

Zdarzenia w DOM propagują się, czyli "bąbelkują" (ang. *bubbling*) od elementu docelowego do korzenia dokumentu. Można kontrolować tę propagację za pomocą metod stopPropagation() i stopImmediatePropagation().

Przykład: Zatrzymanie propagacji zdarzenia
document.querySelector("button").addEventListener("click", (e) => {
  e.stopPropagation();
  alert("Zdarzenie nie będzie propagowane dalej!");
});
Delegowanie zdarzeń

Delegowanie zdarzeń (ang. *event delegation*) to technika, która polega na zarejestrowaniu funkcji obsługi zdarzenia na rodzicu wielu elementów, zamiast na każdym z nich osobno. Jest to szczególnie przydatne przy dynamicznie dodawanych elementach.

Przykład: Delegowanie zdarzeń
document.querySelector("ul").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log(`Kliknięto element: ${e.target.textContent}`);
  }
});
Praktyczne zastosowania

Obsługa zdarzeń ma wiele praktycznych zastosowań, takich jak:

  • Tworzenie interaktywnych menu i przycisków.
  • Walidacja formularzy w czasie rzeczywistym.
  • Implementacja skrótów klawiszowych.
  • Tworzenie gier i animacji reagujących na ruch myszy.
Wskazówka dla PhpStorm: Podczas debugowania kodu JavaScript w PhpStorm, możesz użyć Ctrl + D, aby szybko uruchomić debugowanie i śledzić zdarzenia krok po kroku.
Podsumowanie

Obsługa zdarzeń to kluczowy element tworzenia interaktywnych stron internetowych. Dzięki JavaScript możemy reagować na różne interakcje użytkownika, co pozwala na tworzenie bardziej zaawansowanych i przyjaznych dla użytkownika aplikacji.

Uwaga: Pamiętaj, że nadmierne używanie zdarzeń może wpłynąć na wydajność strony. Zawsze staraj się optymalizować kod, np. poprzez używanie delegowania zdarzeń (ang. *event delegation*).