Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

Browser EventsIntermediate

Event Delegation

Event delegation handles events from many child elements by attaching one listener to a common parent.

Because browser events bubble up the DOM, a parent element can listen for clicks from its children and decide what to do based on the event target. This pattern reduces repeated listeners, works well for dynamic content, and is a standard frontend technique every JavaScript developer should know.

Explanation

Because browser events bubble up the DOM, a parent element can listen for clicks from its children and decide what to do based on the event target. This pattern reduces repeated listeners, works well for dynamic content, and is a standard frontend technique every JavaScript developer should know.

Key Points

  • Delegation works because events bubble from child elements to ancestors.
  • One listener on a parent can manage many child interactions.
  • `event.target` and `closest()` are common tools for delegated handlers.

Common Mistakes

  • Attaching delegation to an element that does not actually receive the bubbled event.
  • Using `event.target` directly without checking whether it matches the intended child.
  • Forgetting that not every browser event bubbles.

Practice Workspace

event-delegation.js

Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.

Editor

23 lines

Output

0 entries

Mode

practice

Workspace Notes

Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.

Live editing

Safe to change before every run.

Fast reset

Return to the original starter instantly.

event-delegation.js
23 linesMonaco Editor
Loading...

Editor Actions

Use the editor to explore the example, then run it to inspect the console.

Console0 entries

Run the code to see output here.

Expected Output

Clicked lesson-2

Continue in Playground

Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.

Open in Playground

Related Concepts

Scope

Scope determines where variables are visible and which parts of your code can access them.

Callbacks

A callback is a function passed into another function so it can run later or customize behavior.

Event Loop

The event loop coordinates synchronous code, queued tasks, and microtasks so JavaScript can handle async behavior.