Moderate DOM Question 84 of 229

What is event delegation and why is it useful?

Frontend Master · Speak this in 60–90 seconds · Faridabad & Delhi NCR

PICTURE THIS: DOM IS A TREE

html
headbody
navmainfooter

Simple meaning

I put one listener on a parent and use event.target to see which child was clicked.

1

WHY — DOM instead of guessing?

Why interviewers care about DOM:

DOM questions separate people

who only read docs from people who shipped.

Keep it short, concrete,

and tied to Frontend work.

Stay structured

Name the idea, why it exists, then one short example.

Close cleanly

End with when you use it and one common pitfall.

2

STEPS — What happens step by step?

Before you speak the answer, walk the interviewer through these steps:

  1. 1
    I put one listener

    on a parent and use event.target to see which child was clicked.

  2. 2
    That works for lists

    that grow and avoids hundreds of listeners.

  3. 3
    In React, bubbling plus

    a handler on the parent is the same idea.

  4. 4
    Give an example

    One tiny concrete case you can say aloud.

  5. 5
    Common mistake

    What juniors usually get wrong.

  6. 6
    Close

    When you pick this over the alternative.

3

EXAMPLE — See it in action

Here's a short line you can speak, broken into clear beats:

Say this line
“That works for lists that grow and avoids hundreds of listeners.”
Break into beats
Thatworksforliststhatgrow
Speaking order
2987408337471632900

Note: Adapt this scaffold to your own project — keep it under 60–90 seconds.

Key takeaway

I put one listener on a parent and use event.target to see which child was clicked. That works for lists that grow and avoids hundreds of listeners.

Chat with us