LLearnCode
Academy/javascript/Browser and asynchronous engineering

intermediate · 22 minute study

One event travels through a tree

Event delegation, nested buttons, keyboard input and game controls all depend on understanding target, currentTarget and propagation.

Loading progressEvidence grows with practice
Useful preparation · 1 prerequisite

Use this as a map, not a lock. If these ideas are familiar, continue.

  • Method calls choose a receiver — Passing an object method as a callback can lose its receiver. Understanding prototypes also makes classes less mysterious.

First, build a mental model

The DOM is a tree. Many events travel down a capture path to a target and then up a bubble path. A listener's currentTarget is the node handling it, not necessarily where the event began.

  1. target identifies where the event originated, subject to retargeting boundaries.
  2. currentTarget identifies the element whose listener is currently running.
  3. preventDefault asks to cancel the default action when the event is cancelable; it does not stop propagation.
  4. Delegated listeners must check that the intended target belongs to their container.
Read the codejavascript · educational example
// Browser DOM example; use the DOM lab to inspect the structure.
const list = document.querySelector('#tasks');
list.addEventListener('click', event => {
  const button = event.target.closest('button[data-id]');
  if (!button || !list.contains(button)) return;
  console.log(button.dataset.id);
});
  1. Target

    A click may begin on a span inside a button.

  2. Delegate

    closest finds the intended button, and contains checks the boundary.

  3. Handle

    The list listener handles the event without requiring one listener per item.

Production thinking

Take this beyond the example.

Prefer semantic buttons and forms. Handle pointercancel, blur and gamepad disconnection in input systems, and do not capture keyboard shortcuts while a text control owns focus.

Sources and further reading

Your evidence

unseen is a local learning signal, not a credential or proof of production competence.

Explain the mental model, then explicitly acknowledge it. Opening a page is not evidence.

Supported retries can complete this lesson. Independent evidence and delayed review determine the skill stage.

Next lesson · The stack must empty before queued work runs →