Propagation and Delegation

Propagation and Delegation | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 30 MIN OF ACTIVE PRACTICE

Learn Propagation and Delegation step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Trace target and currentTarget separately
Verify delegated matches belong to the owner
Avoid stopPropagation unless isolation is required
Build a delegated task list whose future buttons work without adding a listener to each row.

DEEP EXPLANATION

Build the complete mental model

Build the mental model

During dispatch, an event can travel from the window toward the target during capture, reach the target, and travel outward during bubbling. Listeners use the bubble phase by default. Not every event bubbles, and focus-related behavior has specialized event types, so inspect the event contract instead of relying on one universal model. Before writing more syntax, name the values involved in Propagation and Delegation, who creates them, and which result or effect the program promises. Trace the smallest example by hand and identify any browser or runtime API separately from the language feature. A useful mental model should predict a changed input, not merely describe the demonstration after it runs.

Use the API deliberately

Delegation handles related descendant controls from one stable ancestor. Start from event.target, confirm it is an Element, use closest to find the semantic control, then verify the result is contained by the intended owner. This remains robust when a click begins on an icon or span nested inside a button. During implementation, keep the closest rule in a focused function or event boundary with explicit inputs. Choose names that reveal the domain, keep calculation separate from document, console, storage, or network effects, and prefer the narrowest API that expresses the problem. Compare this design with one reasonable alternative and explain why the selected construct makes ownership or control flow clearer.

Handle boundaries and tradeoffs

stopPropagation prevents later listeners along the event path; stopImmediatePropagation also prevents later listeners on the same target. They can be appropriate for true isolation, but routine use breaks analytics, shortcuts, and outer component behavior in surprising ways. Prefer precise matching and early returns before stopping a shared event. Verification for Propagation and Delegation must cover an ordinary case, an empty or missing case, invalid input, and the most important threshold. Predict each result before running it, then locate the first value that violates the contract when reality differs. Record the corrected case as a repeatable check and explain which product behavior should occur instead of allowing undefined, NaN, stale data, or silent failure to spread.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Primary worked example

Trace this Propagation and Delegation example from validated input to returned value or visible effect before editing it.

const list = document.querySelector("[data-list]");
list?.addEventListener("click", event => {
  if (!(event.target instanceof Element)) return;
  const removeButton = event.target.closest("button[data-remove]");
  if (!removeButton || !list.contains(removeButton)) return;
  removeButton.closest("li")?.remove();
});

Example 2: Second worked example

This variation changes the shape of the problem so you can compare the underlying closest contract instead of copying one solution.

function delegatedAction(event, owner) {
  if (!(event.target instanceof Element)) return undefined;
  const control = event.target.closest("[data-action]");
  if (!control || !owner.contains(control)) return undefined;
  return control.getAttribute("data-action") ?? undefined;
}
document.querySelector("nav")?.addEventListener("click", event => console.log(delegatedAction(event, event.currentTarget)));

How to trace this lesson

Write down the exact inputs used by Propagation and Delegation.
Predict each returned value and observable effect before running the example.
Mark the first boundary where invalid or missing data could enter.
Verify the ordinary, empty, invalid, and threshold cases independently.

Common mistakes and corrections

Checking only event.target.matches('button') fails when a nested icon or span inside the button receives the event.: Make the closest rule explicit and cover it with a focused example.
Changing several parts of the example before explaining the original result.: Make one change at a time and compare it with a written prediction.
Testing only the demonstration's happy path.: Add missing, invalid, empty, and boundary inputs that exercise the stated contract.

PRACTICE LADDER

Move from recognition to independent work

1
Trace target and currentTarget separately
2
Verify delegated matches belong to the owner
3
Avoid stopPropagation unless isolation is required
4
Build a delegated task list whose future buttons work without adding a listener to each row.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Core rule

Applied boundary

RUNNABLE EXAMPLE

Change one assumption at a time

Predict the output, run the example, then change one input and one boundary in the Propagation and Delegation example. Explain every changed result before continuing.

const list = document.querySelector("[data-list]");
list?.addEventListener("click", event => {
  if (!(event.target instanceof Element)) return;
  const removeButton = event.target.closest("button[data-remove]");
  if (!removeButton || !list.contains(removeButton)) return;
  removeButton.closest("li")?.remove();
});

const list = document.querySelector("[data-list]");
list?.addEventListener("click", event => {
  if (!(event.target instanceof Element)) return;
  const removeButton = event.target.closest("button[data-remove]");
  if (!removeButton || !list.contains(removeButton)) return;
  removeButton.closest("li")?.remove();
});

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

if (event.target.matches("button")) removeItem();

Reveal repair and explanation

if (!(event.target instanceof Element)) return;
const button = event.target.closest("button[data-remove]");
if (button && list.contains(button)) removeItem(button);

closest handles nested click targets, and the containment check keeps delegation inside its intended component.

INDEPENDENT LAB

Build without copying the example

Build a delegated task list whose future buttons work without adding a listener to each row.

const root = document.querySelector('main');
// Build a delegated task list whose future buttons work without adding a listener to each row.

const root = document.querySelector('main');
// Build a delegated task list whose future buttons work without adding a listener to each row.

Press Run to execute your code.

Self-review checklist Trace target and currentTarget separately Verify delegated matches belong to the owner Avoid stopPropagation unless isolation is requiredWhat did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Why use closest in a delegated click handler? The original target may be nested inside the control It stops every event It converts a button to JSON

2. Which evidence best demonstrates mastery of Propagation and Delegation? A prediction, boundary tests, and an explained result A copied snippet with no changes One successful happy-path run

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering