What is event bubbling and throttling?

Event bubbling

Kliknięcie elementu potomnego może propagować się do rodziców.

<div id="parent">
  <button id="child">Click</button>
</div>

Event może iść:

button
↓
div
↓
body
↓
document

Można zatrzymać propagację:

event.stopPropagation();

Praktyczne zastosowanie to event delegation.

Zamiast dodawać listener do 100 buttonów:

list.addEventListener("click", event => {
  if (event.target.matches("button")) {
    // obsługa
  }
});

Throttling

Ogranicza częstotliwość wykonania funkcji.

Np. scroll może wywoływać handler wiele razy na sekundę. Throttle może ograniczyć go do maksymalnie jednego wykonania co 200 ms.

Throttle: wykonuj regularnie, ale nie częściej niż X.

Debounce: poczekaj, aż użytkownik przestanie wykonywać akcję.

Przykład:

scroll → często throttle
search input → często debounce