Event Propagation and The Bubbling Principle

Event Handling: The Bubbling Principle

Imagine blowing soap bubbles in a bathtub. Each bubble starts small and rises to the surface, growing in size. Similarly, JavaScript events start from the innermost element that triggered the event and "bubble up" through the parent elements until they reach the top of the DOM tree.

The Bubbling Principle is a core concept in JavaScript event handling, and understanding it allows developers to manage events efficiently and prevent unintended effects.

What is the Bubbling Principle?

According to JavaScript.info, the Bubbling Principle means that when an event happens on an element, it first triggers the handlers on that element, then on its parent, and continues upward through all ancestors.

Think of it like a stack of glasses at a wedding: when you pour champagne into the top glass, it overflows into the glasses below. Similarly, an event bubbles up through the DOM, overflowing into parent elements until it reaches the top.

An Example of Event Bubbling

Here’s a practical example:


              <!DOCTYPE html>
              <html>
                <head>
                  <script>
                    window.addEventListener("DOMContentLoaded", event => {
                      document.body.addEventListener("click", event => {
                        console.log("The body click event!");
                        console.log(event.target.id);
                      });
                    });
                  </script>
                </head>
                <body>
                  <div>
                    <div>
                      <p id="paragraph">
                        Clicking this paragraph triggers the body's click handler!
                      </p>
                    </div>
                  </div>
                </body>
              </html>

In this example, clicking on the <p> element triggers the click handler on the <body> due to bubbling. The event starts at the <p>, bubbles through its parents (<div>), and reaches the <body>.

Visualizing Event Bubbling

To further illustrate, consider this example:


      <!DOCTYPE html>
      <html>
        <head>
          <script>
            window.addEventListener('DOMContentLoaded', event => {
              function handler(e) {
                console.log(e.currentTarget.tagName);
              }
              document.querySelector('main').addEventListener('click', handler);
              document.querySelector('div').addEventListener('click', handler);
              document.querySelector('p').addEventListener('click', handler);
            });
          </script>
        </head>
        <body>
          <main>
            <div>
              <p>This is a paragraph in a div in a main in a body in an html</p>
            </div>
          </main>
        </body>
      </html>

Clicking on the <p> element will log messages for the P, DIV, and MAIN, demonstrating how the event propagates upwards.

Stopping Event Bubbling with stopPropagation()

Sometimes, bubbling can cause unintended effects. For example, clicking a <video> inside a <div> with a toggle effect might hide the video. To stop the bubbling, use the event.stopPropagation() method:


window.addEventListener('DOMContentLoaded', event => {
  document
    .querySelector('video')
    .addEventListener('click', event => {
      event.stopPropagation();
      video.play();
    });
});

Using Bubbling for Event Delegation

While bubbling can sometimes be problematic, it can also be leveraged for efficient event handling. Event delegation allows you to attach a single event handler to a parent element and let it handle events for its child elements.

For example:


window.addEventListener('DOMContentLoaded', event => {
  document
    .getElementById('my-list')
    .addEventListener('click', e => {
      console.log(e.target.innerHTML); // Clicked list item
      console.log(e.currentTarget.id); // Parent ID
    });
});


<ul id="my-list">
  <li>This is list item 1.</li>
  <li>This is list item 2.</li>
  <li>This is list item 3.</li>
</ul>

Key Takeaways

The Bubbling Principle allows events to propagate up the DOM tree.
Use stopPropagation() to prevent unintended bubbling effects.
Event delegation makes handling child element events efficient and streamlined.

Armed with this knowledge, you can now frolic responsibly in the world of event bubbles!