← Back

EVENT DELEGATION IN JAVASCRIPT

This note explains event delegation in simple language.

You will learn:

  1. what event propagation is
  2. what event bubbling is
  3. the difference between event.target and event.currentTarget
  4. how to stop propagation
  5. what event delegation is
  6. why event delegation is useful

1. What is event propagation?

When an event happens on a web page, it does not exist only in one place. It goes through a process called event propagation.

This process has 3 stages:

  1. capturing phase
  2. target phase
  3. bubbling phase

In practice, developers most often work with the bubbling phase.

Diagram 1. Three phases of event propagation

window
v
capturing phase
v
target element
v
bubbling phase
v
window

Explanation

The event first goes down to the target, then goes back up.

2. Capturing phase

The capturing phase starts at window and moves down through parent elements until it reaches the deepest element where the event happened.

For example, if you click a button inside several nested elements, the event first travels down through those outer elements until it reaches the button.

Diagram 2. Capturing phase

window
v
html
v
body
v
parent
v
child
v
button

Explanation

This is the going down part of the event path.

3. Target phase

The target phase is the moment when the event reaches the exact element where the action happened.

If the user clicks a button, the button is the target element.

Diagram 3. Target phase

User clicks button
v
event reaches button
v
target phase

Explanation

This is the center point of the event path.

4. Bubbling phase

The bubbling phase is the stage where the event moves upward from the target element through its parent elements and continues upward toward window.

This is called bubbling because it is like an air bubble rising in water.

Diagram 4. Bubbling phase

button
^
child
^
parent
^
body
^
html
^
window

Explanation

This is the most important phase for real JavaScript work.

5. Example of bubbling

Here is the HTML example from the lesson:

<div id="parent">
  Parent
  <div id="child">
    Child
    <div id="descendant">Descendant</div>
  </div>
</div>

If you click on #descendant, the click handlers will run in this order:

  1. #descendant
  2. #child
  3. #parent
  4. and higher if listeners exist there too

So the console order is:

descendant -> child -> parent

Diagram 5. Bubbling with nested elements

Click on #descendant
v
#descendant handler
v
#child handler
v
#parent handler

Explanation

This is bubbling in action.

6. What is the target element?

The target element is the original element where the event really happened.

It is available as:

event.target

This value does not change during bubbling.

7. event.target vs event.currentTarget

This is one of the most important parts of the topic.

event.target

The original element where the event happened. It stays the same during bubbling.

event.currentTarget

The element whose listener is currently running. This is the element where the handler is attached.

Diagram 6. target vs currentTarget

User clicks descendant
v
event.target = descendant

Handler is attached to parent
v
event.currentTarget = parent

Explanation

Easy rule:

target = where it happened
currentTarget = where it is handled

8. Example of target and currentTarget

If a click listener is attached to Parent, and the user clicks Descendant, then:

This is why the difference is so important.

Diagram 7. Real meaning

Click on Descendant
v
event.target = Descendant

Event bubbles to Parent listener
v
event.currentTarget = Parent

9. Stopping propagation

Normally, an event bubbles all the way upward.

But JavaScript allows you to stop that process.

There are two methods:

Diagram 8. Normal bubbling vs stopped bubbling

Normal:
target ^ child ^ parent ^ ...

Stopped:
target ^ child
STOP

Explanation

These methods interrupt the normal upward movement of the event.

10. event.stopPropagation()

event.stopPropagation() stops the event from bubbling farther up the DOM tree.

That means parent elements above the current one will not receive the event. But other handlers on the same element can still run.

Example idea

element.addEventListener("click", event => {
  event.stopPropagation();
});

Diagram 9. stopPropagation()

Event reaches current element
v
stopPropagation()
v
no more parent handlers
v
same-element handlers can still run

11. event.stopImmediatePropagation()

event.stopImmediatePropagation() also stops bubbling upward, but it does one more thing:

It also stops other handlers for the same event on the same element.

Diagram 10. stopImmediatePropagation()

Event reaches current element
v
stopImmediatePropagation()
v
no more parent handlers
v
no more same-element handlers

Explanation

This is stronger than stopPropagation().

12. Important warning

The lesson gives an important rule:

Do not stop bubbling unless it is really necessary.

Why?

Because some systems depend on bubbling, for example analytics tools that track user actions on a page. If you stop propagation, those systems may stop receiving important information.

Diagram 11. Why stopping bubbling can be dangerous

User action
v
event should bubble upward
v
analytics / tracking / other logic may need it

If propagation is stopped
v
that logic may never see the event

13. What is event delegation?

Event delegation is one of the most useful techniques in JavaScript.

Instead of adding a separate listener to every small element, you add one listener to their common parent and use bubbling to catch the events there.

Diagram 12. Delegation idea

Many child elements
v
one common parent
v
one listener on parent
v
parent handles child events through bubbling

Explanation

This is cleaner and more efficient than attaching many listeners.

14. Why event delegation is useful

Imagine there are 100 buttons inside one container.

A beginner solution might be:

That means 100 listeners.

A better solution is:

Diagram 13. 100 listeners vs 1 listener

Bad approach:
100 buttons
v
100 listeners

Better approach:
100 buttons
v
1 common parent
v
1 listener

Explanation

Delegation reduces repeated work and is easier to maintain.

15. How event delegation works

The lesson gives 3 simple steps:

  1. find the common ancestor of the elements
  2. attach one event listener to that ancestor
  3. inside the handler, use event.target to find the real clicked element

Diagram 14. Delegation steps

Step 1:
find common parent

Step 2:
add listener to parent

Step 3:
use event.target inside handler

16. Example of event delegation

const box = document.querySelector(".box");

box.addEventListener("click", function (event) {
  console.log(event.target);
});

Explanation

Here:

Diagram 15. Delegation in code

.box listener
v
user clicks child inside .box
v
event bubbles to .box
v
handler runs
v
event.target tells us the clicked child

17. Why delegation is better in dynamic interfaces

Delegation is especially useful when elements can be:

Because the parent listener stays the same, you do not need to manually add or remove listeners for each child element.

Diagram 16. Delegation with changing elements

Parent has one listener
v
children can appear or disappear
v
listener still works

Explanation

This is one of the biggest real-life advantages of event delegation.

18. Easy memory rules

Propagation = full event path
Capturing = going down
Target = exact element clicked
Bubbling = going up

event.target = where event happened
event.currentTarget = where handler runs

Delegation = one parent listener for many child elements

19. Quick summary

20. Final conclusion

If you understand these ideas:

propagation
capturing
target
bubbling
event.target
event.currentTarget
stopPropagation()
event delegation

Then you already have a strong base for advanced event handling in JavaScript.

Event delegation is especially important in real projects because it makes code simpler, lighter, and easier to maintain.

← Back