22. Czy możesz wyjaśnić koncepcję 'delegacji zdarzeń' w JavaScript?

Delegacja zdarzeń to technika w JavaScript, w której pojedynczy nasłuchiwacz zdarzeń jest dodawany do elementu nadrzędnego zamiast dodawania wielu nasłuchiwaczy zdarzeń do poszczególnych elementów podrzędnych. Jest to szczególnie przydatne do zarządzania zdarzeniami na dynamicznie generowanych elementach lub gdy jest wiele elementów podrzędnych.

Oto jak to działa:

1. Bąbelkowanie zdarzeń: Gdy zdarzenie jest wywoływane na elemencie, najpierw uruchamia obsługę na tym elemencie, a następnie bąbelkuje do elementów nadrzędnych, uruchamiając również ich obsługę.
2. Użycie pojedynczego nasłuchiwacza zdarzeń: Umieszczając nasłuchiwacz zdarzeń na wspólnym przodku wszystkich elementów, które należy monitorować, można przechwytywać zdarzenia podczas ich bąbelkowania.
3. Identyfikacja celu: W obrębie obsługi zdarzeń można określić rzeczywisty cel zdarzenia za pomocą właściwości event.target i wykonać niezbędne działania.

Przykład:

// Element nadrzędny
const parent = document.getElementById('parent');

// Delegacja zdarzeń
parent.addEventListener('click', function(event) {
  if (event.target && event.target.matches('button.someClass')) {
    console.log('Button clicked:', event.target);
  }
});

Delegacja zdarzeń jest wydajna i pomaga zmniejszyć zużycie pamięci oraz poprawić wydajność, zwłaszcza przy pracy z dużymi listami lub dynamiczną zawartością.