What is event bubbling and throttling?

Event bubbling

A click on a child element can propagate up to its parents.

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

The event can travel:

button
↓
div
↓
body
↓
document

You can stop the propagation:

event.stopPropagation();

A practical use is event delegation.

Instead of adding a listener to 100 buttons:

list.addEventListener("click", event => {
  if (event.target.matches("button")) {
    // handle it
  }
});

Throttling

Limits how often a function runs.

For example, scroll can fire a handler many times per second. A throttle can limit it to at most one run every 200 ms.

Throttle: run regularly, but no more often than X.

Debounce: wait until the user stops doing the action.

Example:

scroll → often throttle
search input → often debounce