Czym jest model zdarzeń w przeglądarce?

Metoda obsługi interakcji użytkownika (kliknięcia, wprowadzanie, najechanie) i zdarzeń systemowych (ładowanie strony, błędy) w przeglądarce internetowej.

Główne koncepcje:

• Zdarzenie: Akcja, która miała miejsce.
• Obsługa zdarzenia: Funkcja wykonywana podczas wystąpienia zdarzenia.
• Obiekt zdarzenia (Event object): Przekazywany do obsługi i zawiera informacje o zdarzeniu (typ, element, współrzędne itp.).

Standardowy przepływ zdarzeń:

1. Przechwytywanie (Faza przechwytywania): Zdarzenie schodzi od najwyższego elementu DOM (Window, Document) do elementu docelowego. Obsługiwacze na tym etapie uruchamiają się jako pierwsze.
2. Faza docelowa (Target phase): Zdarzenie dociera do elementu docelowego, na którym wystąpiło.
3. Bąbelkowanie (Faza bąbelkowania): Zdarzenie wznosi się od elementu docelowego z powrotem przez drzewo DOM do Window. Obsługiwacze na tym etapie uruchamiają się po fazie przechwytywania i docelowej.

Dodawanie obsługi:

• Atrybuty HTML (onclick, onload): Przestarzała metoda, niezalecana dla złożonych aplikacji.
• Właściwości elementów DOM (element.onclick): Można przypisać tylko jeden obsługiwacz dla każdego typu zdarzenia na elemencie.

  // Przykład
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Naciśnięto przycisk!');
  };
  

• Metoda addEventListener: Metoda preferowana. Pozwala dodawać wiele obsługiwaczy dla jednego zdarzenia i kontrolować fazę obsługi (przechwytywanie lub bąbelkowanie).

  // Przykład
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Kliknięcie przycisku!', event);
  }, false); // false - bąbelkowanie, true - przechwytywanie
  

Metoda removeEventListener służy do usuwania obsługiwaczy.

Delegacja zdarzeń: Dołączenie obsługi do elementu nadrzędnego w celu obsługi zdarzeń elementów potomnych. Oszczędza zasoby i upraszcza pracę z zawartością dynamiczną.

// Przykład delegacji
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Kliknięto element listy:', event.target.textContent);
    }
});