What Is Meant by "Event Propagation" in JavaScript?

Event propagation in JavaScript refers to the way a triggered or dispatched event travels through the HTML document, passing through each element in its hierarchy until it reaches the top-most element — i.e. the document root. As the event travels through the document, each element that the event passes through has the opportunity to handle the event by attaching an event listener to it.

There are two ways an event propagation takes place in JavaScript:

  1. Bubbling;
  2. Capturing.

It is also possible to stop the event from propagating at any point, either in the capturing or bubbling phase, as it travels through the document.

Bubbling

With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. This means that it starts at the target element and works its way up to the top of the hierarchy.

To handle an event during the bubbling phase, you can set the third argument to EventTarget.addEventListener() method to false (which is the default).

Consider for example the following, which shows how event bubbling works:

<div id="grandparent">
  <div id="parent">
    <button id="child">Click me</button>
  </div>
</div>
document.getElementById('grandparent').addEventListener('click', function() {
  console.log('Grandparent clicked');
});

document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', function() {
  console.log('Child clicked');
});

If you click the button in this example, the following output will be logged in the console:

Child clicked
Parent clicked
Grandparent clicked

Capturing

With capturing, the event is first captured by the outermost element and then propagated to the inner elements. This means that it starts at the top of the DOM hierarchy and works its way down to the target element.

To handle an event during the capturing phase, you can set the third argument to EventTarget.addEventListener() method to true.

Consider for example the following, which shows how event capturing works:

<div id="grandparent">
  <div id="parent">
    <button id="child">Click me</button>
  </div>
</div>
document.getElementById('grandparent').addEventListener('click', function() {
  console.log('Grandparent clicked');
}, true);

document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked');
}, true);

document.getElementById('child').addEventListener('click', function() {
  console.log('Child clicked');
}, true);

If you click the button in this example, the following output will be logged in the console:

Grandparent clicked
Parent clicked
Child clicked

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.