The Event Object, Bubbling & Delegation

The event object — the details of what happened

Every time an event fires, the browser hands your handler one argument: the event object (we usually call it e). It is a little report describing what happened — which element was involved, what was typed, where the mouse was, and so on. You met e.target briefly in the Events lesson; here we look closer.

The most useful piece is e.target — the exact element that the event happened on. The example below has three buttons but only one handler. When you click any button, e.target tells us which one you actually hit.

<div id="panel">
  <button>Red</button>
  <button>Green</button>
  <button>Blue</button>
</div>
<p id="out">Click a button.</p>

<script>
  document.getElementById("panel").addEventListener("click", function (e) {
    document.getElementById("out").textContent = "You clicked: " + e.target.textContent;
  });
</script>

The listener is on the <div id="panel">, not on the buttons. When you click "Green", the click happens on the button, so e.target is that button and e.target.textContent is "Green". The same one handler correctly reports whichever button you press. That only works because of bubbling, which we explain next.

Bubbling — events travel upward

When you click an element, the event does not stop there. It bubbles: it fires on the element you clicked, then on that element’s parent, then its grandparent, all the way up to the page. Think of a bubble rising from the bottom of a glass to the top.

So a click on a button inside a div inside the body fires on the button first, then the div, then the body — in that order. This is why a single listener on a parent can "hear" clicks on all of its children: the click bubbles up to the parent and triggers its handler.

1. You click the innermost element (say, a <button>).
2. The event fires on that button first — this is where e.target points.
3. The same event then fires on the button’s parent, then its parent, rising upward.
4. Any listener it passes on the way up runs. It stops at the top of the document.
5. You can halt this rise early by calling e.stopPropagation() inside a handler.

Event delegation — one listener for a whole list

Event delegation is a professional pattern built directly on bubbling. Instead of attaching a separate listener to every item in a list, you attach one listener to the shared parent and use e.target to figure out which child was clicked.

Why bother? Because items added later automatically work too. A listener attached to each existing item cannot hear clicks on items you create afterwards — but a single parent listener catches every click that bubbles up to it, no matter when the item was added. The demo below adds new rows, and deletion keeps working on all of them.

<button id="add">Add item</button>
<ul id="todos">
  <li>First item <span class="x">✕</span></li>
</ul>

<script>
  const list = document.getElementById("todos");

  // ONE listener on the parent handles every ✕, even on future items
  list.addEventListener("click", function (e) {
    if (e.target.classList.contains("x")) {
      e.target.parentElement.remove();   // remove the whole <li>
    }
  });

  document.getElementById("add").addEventListener("click", function () {
    const li = document.createElement("li");
    li.innerHTML = "New item <span class='x'>✕</span>";
    list.appendChild(li);
  });
</script>

Reading it step by step:

1. We attach one click listener to the <ul> parent, not to each ✕.
2. When any ✕ is clicked, the click bubbles up to the <ul> and runs our handler.
3. e.target.classList.contains("x") checks whether the thing actually clicked was a ✕ (and not, say, the item text).
4. If it was a ✕, e.target.parentElement is its <li>, and .remove() deletes that whole row.
5. Crucially, the Add item button creates brand-new <li> rows — and their ✕ buttons work immediately, because the single parent listener catches their bubbled clicks too.